ECharts使用从0到1 -- 以vue-echarts为例

虽然老早就看过很多echarts的例子， 但自己接触的项目中一直都没有真正用到过， 这次做了一个后台管理系统，终于用到了， 下面我就纪录下， 从一开始什么都没有到最后将图标画出来的步骤， 以便日后查阅。

参考之一： github上的vue-echarts-v3根据里面的步骤一步步来， 就能够绘制出一个简单的柱形图了

参考二： echarts的官网api文档

结合上述两个url， 就能绘制出自己想要的效果了。 接下来， 是我在使用过程中的一些纪录代码。

首先，import 进echarts之后， 我们像以下方式进行使用：

//: option后面跟着的就是接下来要说的配置内容了
//: loading表示时候要显示loading效果
//: onClick是点击折线上每一个点时候触发的事件
<div class="echarts">
<IEcharts :option="line" :loading="loading" @click="onClick"></IEcharts>
</div>

接下来， 我们将关于图表的配置信息写在data中， 即：

data(){
return {
line: {
// code here
}
}
}

接下来， 就一一讲解line里面的配置项目了

// text表示图表的标题内容
title: {
text: 'echarts的基本使用',
// subtext: '我是子标题'
},

如下图所示：

tooltip: {
// 控制鼠标滑过折线点出现的窗口内容哪个坐标值在上 默认series中标注的name值
// 加了trigger: 'axis'之后就变成折线点对应的x轴坐标值在上方
trigger: 'axis',
// 去掉鼠标滑过折线点的时候默认出现的线条
axisPointer: {
type: 'none'
}
},

如下图所示：



如果没有写trigger: ‘axis’的话则显示效果为：

// echarts为我们提供的一些工具方法
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {
readOnly: false
},
magicType: {
type: ['line', 'bar']
},
restore: {},
saveAsImage: {}
}
},

工具条如下图所示， 主要包括下载图片，转换为柱状图等…

// x轴设置，真实项目中data数据是动态填充的， 这里作为一个demo, 直接给固定内容
xAxis: {
name: '横坐标',
type: 'category',
// true的话， 数据的显示位置在中间 默认就是true
// boundaryGap: true,
// 设置横坐标数据的摆放样式
axisLabel: {
interval: 0,
rotate: -60,
showMinLabel: true
},
axisTick: {
length: 5
},
data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
},

yAxis: {
name: '纵坐标',
type: 'value',
// 可以通过splitNumber进行改变分割间隔，默认值是5
splitNumber: 8,
axisLabel: {
formatter: '{value} °C'
}
},

// 如果绘制的是两条折线， 那么series就有两个对象值
series: [{
name: '温度',
type: 'line',
data: [0, 3, 10, 8, 12, 13, 10],
// 控制是否显示折线上每个点对应的y坐标值
label: {
normal: {
show: true
}
},
// 标注出最大值和最小值
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},

// 标注出y轴平均值 线
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
}
]

最后就是点击每一个折线点触发的事件， 通过这个事件我们就可以实现弹窗等效果。。。,假设我们在created里面发起请求， 拿到数据赋给dataList变量，数据格式为：

[{
"scoreId": 209,
"databaseType": "AMS",
"totalScore": 3,
"date": "20170522 10:34:44",
"reportType": "MERGE_NEWEST"
},
{
"scoreId": 209,
"databaseType": "AMS",
"totalScore": 8,
"date": "20170522 10:34:44",
"reportType": "MOTHER_NEWEST"
}］

onClick(event, instance, echarts) {
// 如果我们要获取点击到的折线点的scoreId发起一个请求
// 那么this.dataList[event.dataIndex].scoreId, 拿到这个值我们就可以根据需要随意进行处理了;
console.log('arguments:', arguments);
console.log('event:', event);
console.log('instance:', instance);
console.log('echarts:', echarts);
},

还有不要忘记了style

.echarts {
width: 100%;
height: 600px;
}

来个完整大图