echarts的使用总结

 

echarts作为数据可视化插件的后期之秀，已经越来越多地被越来越多的公司或独立开发者使用，其底层依赖轻量级的Canvars类库ZRender，提供了直观生动、可定制的数据可视化图表。

echarts提供了多种图表呈现类型，我们这里主要看一下常用的三种图表类型：折线图、柱状图、饼图。

折线图、柱状图：

                   this.$echarts.dispose(document.getElementById('chart1')); // 内存释放
                   var chart1= this.$echarts.init(document.getElementById('chart1')); // 初始化图表
                   chart1.showLoading({ 
　　                     text: '数据加载中...' 
                   });

　　　　　　　　　　　var chart1Option = {
　　　　　　　　　　　　　　// 标题
                        title: {

                            text: '图表1',
                            x: 50
                        },
　　　　　　　　　　　　　　// 提示框
                        tooltip: {trigger: 'axis'},
　　　　　　　　　　　　　　// 图例信息
                        legend: {
                            data: ['图例'],
                            x: '55%'
                        },
　　　　　　　　　　　　　　// 工具箱
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {show: true},
                                magicType: {show: true, type: ['line', 'bar']}, // 折线、柱状切换
                                restore: {show: true},
                                saveAsImage: {show: true}
                            },
                        },
　　　　　　　　　　　　　　// x轴坐标信息
                        xAxis: [{
                            type: 'category', // 坐标轴类型

　　　　　　　　　　　　　　　　// 坐标轴参数显示数据

                            data: ['目录1'，'目录2'，'目录3'，'目录4'，'目录5'，'目录6'，'目录7'，'目录8'], 

                            axisLabel: { // 坐标轴参数显示间隔、旋转角度
                                interval: 0,
                                rotate: 30,
                            },
                        }],
　　　　　　　　　　　　　　// y轴坐标信息
                        yAxis: [
                            {
                                type: 'value', //坐标轴类型
                                name: 'x轴名称
', //坐标轴名称
                            }
                        ],
　　　　　　　　　　　　　　// 坐标体系占图表中的位置
                        grid: {
                            x: 150,
                            y2: 150,
                        },
       　　　　　　　　　　// 生成图表的数据内容
                        series: [
                            {
                                name: '图例', // 与legend名称一致
                                type: 'bar', // 初始图表类型
                                markPoint: { // 标注
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ],
                                },
                                markLine: { // 标线
                                    symbol: ['arrow', 'none'],
                                    symbolSize: [4, 2],
                                    data: [{type: 'average', name: '平均值'}]
                                },
                                data: [12, 14, 17, 13, 15, 10, 30, 28]
                            }
                        ]
                    }
                    chart1.hideLoading(); // 关闭加载信息
                    chart1.setOption(chart1Option); // 画图

 饼图：

this.$echarts.dispose(document.getElementById('chart2'));
var chart2= this.$echarts.init(document.getElementById('chart2'));
chart2.showLoading({ 
　　text: '数据加载中...' 
});
var chart2Option = {
    title : {
　　　　 text: '饼图',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'horizontal',
        x : 'left',
        data: ['分类1'，'分类2'，'分类3'，'分类4'，]
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            magicType : {
                show: true,
                type: ['pie', 'funnel'],
            },
        }
    },
    series : [
        {
            name:'分类',
            type:'pie',
            radius : '55%',
            center: ['50%', '65%'],
            data: [{name: '分类1'， value: 15},{name: '分类1'， value: 16},{name: '分类1'， value: 17},{name: '分类1'， value: 18}]
        }
    ]
};
chart2.hideLoading();
chart2.setOption(chart2Option);

参考链接：

http://echarts.baidu.com/echarts2/doc/doc.html#Line