ECharts的简单使用和说明

ECharts实现页面数据转换为柱状图、折线图和扇形图

先看一个小例子：

首先想使用ECharts生成一个图，那么HTML页面就需要先有一个含宽高容器来承载：

然后JS中进行ECharts的实例化：

 // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

实例化后在option中编写想要呈现的数据以及图表的类型：

var option = {
            title: {
                text: 'ECharts 示例'   //图表的标题
            },
            tooltip: {},         //提示框样式及内容
            legend: {
                data:['销量']
            },
            xAxis: {          //X轴属性
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},        //Y轴属性
            series: [{
                name: '销量',
                type: 'bar',          //图标类型 line为折线 bar为柱状图  pie为扇形图
                data: [5, 20, 36, 10, 10, 20]       //图表中的数据
            }]
        };

如果想折线图和柱状图之间可以互相切换需要在option中加入如下代码（甚至可以将图片下载保存为图片）：

 toolbox : {
            show : true,
            feature : {
                magicType : {       //转换按钮
                    show : true,
                    type : [ 'line', 'bar' ]       //转换形式
                },
                restore : {         //返回数据按钮
                    show : true
                },
                saveAsImage : {     //下载保存为图片按钮
                    show : true,
                    title : '保存为图片',
                    type : 'png',
                    lang : [ '点击保存' ]
                }
            }
        },

小编在这里也只用过这么多，至于折线图柱状图和扇形图之间的转换在

       type : [ 'line', 'bar' ]       //转换形式

加入pie是不好使得 需要自行找方法解决下面，小编将分享一个网站供大家使用和学习
学习链接：http://echarts.baidu.com/echarts2/doc/example.html