WdBly Blog

懂事、有趣、保持理智

WdBly Blog

懂事、有趣、保持理智

周维 | Jim

603927378@qq.com

Echarts使用说明

本篇文章介绍了Echarts基础使用,总结了在项目中使用Echarts的细节和踩过的坑

image.png

Echarts 3简介

ECharts是一个使用 JavaScript 实现的开源可视化库,基于zRender,底层多是基于html5的canvas,部分基于svg。

svg 意为可缩放矢量图形(Scalable Vector Graphics)

在项目中使用Echarts

1.通过script标签引入
2.通过npm引入
      npm i ecarts -S

按需引入

main.js的配置,引入了拼图和各种控件

import echarts from 'echarts/lib/echarts' import 'echarts/lib/chart/pie' import 'echarts/lib/component/toolbox' import 'echarts/lib/component/dataZoom' import 'echarts/lib/component/title' import 'echarts/lib/component/tooltip' import 'echarts/lib/component/grid' import 'echarts/lib/component/markLine' import 'echarts/lib/component/legendScroll' Vue.prototype.$echarts = echarts; //全局注册

npm是全世界最大的javascript包管理工具
-S => --save
-D ==> --save -dev
通过-S安装的npm包会管理在 dependencies 中,上线阶段
image.png
通过-D安装的npm包会管理在 devDependencies 中,开发阶段
image.png

使用

1.准备存放Echarts图表的容器

<div id="chart" style="width:500px;height:500px" v-loading="loading"></div>

2.在页面加载时初始化Echarts

this.myChart = this.$echarts.init(document.getElementById('chart'));

3.根据数据和配置构建图表

//常用的配置项如下 option = { title:{ text: '用电量图表显示', //图表标题 link: "map", //跳转路由路径 left: 'center', //距离左侧的距离,center代表居中 target: 'self', //当前窗口打开链接 textStyle: { //标题的样式 ==驼峰命名== color: 'black', fonStyle: 'oblique', fontWeight: 600, fontFamily: 'sans-serif', fontSize: 18 } }, tooltip: { //提示框组件 trigger: 'axis' //触发类型(item,axis,none) }, legend:{ type: 'scroll', //超出部分滚动 orient: 'vertical', //方向垂直(horizontal) data:this.chartOpt.legendTit //data:Array }, toolbox: { //工具栏 show: true, feature: { //feature dataZoom: { yAxisIndex: 'none' //指定哪些 yAxis 被控制none控制所有(3,[0,3]) }, dataView: {readOnly: false},//数据视图是否只读 magicType: {type: ['line', 'bar']},//动态类型切换 restore: {}, //配置项还原。 saveAsImage: {} //保存为图片 } }, xAxis: [ //多轴模式 :Array { type : 'category',//默认离散性坐标系,time,value,log boundaryGap : false,//折线和柱状切换,柱状时为true最好 axisLabel: { interval: 0, //横轴信息全部显示 rotate: -30 //顺时针旋转30度 } data: timeData//离散轴:Array[val,val...],时间轴[[x,y],[x,y],[x,y]],x的格式为完整的时间字符串 }, { gridIndex: 1, //默认为0,这是每个x轴的唯一标记 type : 'category', boundaryGap : false, data: timeData, position: 'top' //这条轴的位置 } ], yAxis: {//同样也可以有多个y轴 那时类型为数组 type: 'value',//数值轴 axisLabel: { formatter: '{value} °C' } }, series: {//同样也可以有多条数据 那时类型为数组 name:'最高气温', //需要对应lenged中的名字 type:'line', data:[11, 11, 15, 13, 12, 13, 10], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine: { data: [ {type: 'average', name: '平均值'} ] } } };

4.执行绘制

this.myChart.setOption(option,true); //第二个参数代表重绘

项目爬坑

1.Echarts时间轴的问题:设置x轴的属性为时间轴后,不用为x轴的data
属性赋值,而是以[['2017/08/20 12:30:43',value],['2017/08/20 12:30:43',value]]格式为series赋值,
可以达到x轴分布不均匀的效果

经过测试,当数据量过大,且分类较多时,用户操作卡顿,最终还是使用类目轴,PS:接受的时间字符串需要补零,且必须完整。
2:boundaryGap设置为false时柱状图问题
xAxis: {boundaryGap: false},

image.png

3:使用myChart.resize()可以重置echarts容器的宽高
(opts?: {
     width?: number|string,
     height?: number|string,
     silent?: boolean
}) => ECharts  

细节问题

1.y轴配置:y轴的配置中接受max和min两个配置,不写怎Echats自动计算,另有一个叫做interval的配置,用于规定y轴固定间隔。
2:series中 设置 smooth:true 可以将折线显示为贝塞尔曲线
3:setOption的第二个参数为true代表允许重绘;

贝塞尔曲线:

20160712143925787.gif

1415845715278bezierquadraticanimation.gif

20160712143945858.gif

image.png

canvas案例

demo

扩展

3d demo

http://echarts.baidu.com/examples/editor.html?c=line3d-orthographic&gl=1