参考之一： 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; }来个完整大图
