Vue引入echarts在系统中，图表的展示比数据更加直观，之前公司重做了仪表盘，记录一下其中一个图表的开发过程。官方的

在系统中，图表的展示比数据更加直观，之前公司重做了仪表盘，记录一下其中一个图表的开发过程。官方的Api比较全面，会使用一个，大部分也就会了

Echart实例

我现在做的只是一个小demo。就没有去下载js文件，直接引用的远程的echart.js.

在index.html中引入文件

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.js"></script>

定义一个存放图标的容器

基于准备好的容器，初始化echart实例

var myChart = echarts.init(document.getElementById('main'));

指定图表的配置项和数据。官方实例
```
var option = {}
```
使用刚指定的配置项和数据显示图表。
```
myChart.setOption(option);
```
成品图

echart常用配置项

title 标题组件，包含主标题和副标题。在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件。
text 主标题
subtext 副标题
grid 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）
legend 图例组件。点击图例控制哪些系列不显示
toolbox 工具栏。内置导出图片，数据视图，动态类型切换（'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式））等
graphic 原生图形元素组件。我感觉像是水印
tooltip 提示框组件
xAxis 直角坐标系 grid 中的 x 轴
yAxis 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴。
series 系列列表。通过 type 决定自己的图表类型

Title配置项

加入标题组件后标题和副标题会和图标重叠。为了方便，就直接拿最后的图进行标注

title: {    text: '出生死亡人口',    subtext: '数据仅为展示，纯属虚构',    textStyle: {// 主标题文本样式        color:'#61a0a8'    }},

grid配置项

目前我用到了grid里对图表的样式的调整

grid: {    top: '100'},

Legend配置项

点击可以控制那一列不显示

legend : {    top: '50',    data : [ '出生人口', '死亡人口' ]},

toolbox工具栏配置项

里面包含导出图片，数据视图，动态类型切换等功能

toolbox: { // 工具栏    show: true,    showTitle: true,    feature: {        saveAsImage: { // 保存图片            type: 'png', // 图片格式            show: true        },        dataView: { // 数据视图            show: true        },        magicType: { //动态类型切换 'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式            type: ['line', 'bar', 'stack']        }    }},

graphic图形配置项

给图标添加水印初始化水印，获取this.waterMarkGraphic

initWaterMarkGraphic() {    this.waterMarkGraphic=[ {        type : 'image',        id : 'logo',        right : 190,        bottom : 50,        z : 100,        bounding : 'raw',        origin : [ 0, 0 ],        scale : [ 0.5, 0.5 ],        rotation : Math.PI / 4,        style : {            image : require("../assets/graphic.jpg"),            opacity : 0.3        }    }, {        type : 'group',        rotation : Math.PI / 4,        bounding : 'raw',        right : 110,        bottom : 70,        z : 100,        children : [ {            type : 'rect',            left : 'center',            top : 'center',            z : 100,            shape : {                width : 400,                height : 80            },            style : {                fill : 'rgba(0,0,0,0.0)'            }        }]    }]},

吧水印添加到图标上

graphic : this.waterMarkGraphic,

xAxis，yAxis，tooltip配置项混合使用

tooltip 提示框组件
xAxis 直角坐标系 grid 中的 x 轴
yAxis 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴。
series 系列列表。通过 type 决定自己的图表类型

双Y轴需要yAxis传入数组。

series也需要传入数组，数组中两个对象。数组不同，两个图不一定要相同。可以折线图和柱状图混合使用。尤其需要注意。series第二个对象需要指定yAxis的下标yAxisIndex : 1,

柱状图上显示数字：

series里对象中itemStyle定义

tooltip提示：

需要添加tooltip配置项。

tooltip : {    trigger : 'axis',    axisPointer : { // 坐标轴指示器，坐标轴触发有效        type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'    },},
xAxis: {    type: 'category',    data: xData},yAxis: [    {        type: 'value',        name: '出生人口',        axisLabel : {            formatter : '{value}W'        }    },    {        type: 'value',        name: '死亡人口',        axisLabel : {            formatter : '{value}W'        }    }],

series: [    {        data: y1Data,        type: 'bar',        color: '#91BDC2',        name: '出生人口',        itemStyle: {            normal : {                label : {                    show : true, // 开启显示                    position : 'top', // 在上方显示                    textStyle : { // 数值样式                        color : 'black',                        fontSize : 11                    }                }            }        }    },    {        data: y2Data,        type: 'bar',        color: '#E0A7A6',        yAxisIndex : 1,        name: '死亡人口',        itemStyle: {            normal : {                label : {                    show : true, // 开启显示                    position : 'top', // 在上方显示                    textStyle : { // 数值样式                        color : 'black',                        fontSize : 11                    }                }            }        }    }]

最终效果

Demo地址

github地址 github.com/zhaojinyi/v…

Vue引入echarts