echarts

基于ZRender矢量图形库进行封装开发

echats支持流数据的动态渲染（提供增量渲染技术，类似于懒加载）

快速上手

0.引入echarts.js文件

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>

准备一个呈现图标的div

初始化一个echarts实例对象

var echarts = echarts.init(document.querySelector('#echarts'));

准备配置项
将配置项设置给实例对象

var mcharts = echarts.init(document.getElementById('echarts'));
var option = {
    xAxis: {
        type: 'category', // 类目轴
        data: ['a','b','c']
    },
    yAxis: {
        type: 'value' // 数值轴，值从series取
    },
    series: [
        {
            name: 'Math',
            type: 'line', // 决定图标的类型
            data: [70,92,99]
        }
    ]
};
mcharts.setOption(option);

常用图表：柱状图、饼图、折线图、散点图、地图、雷达图、仪表盘图

通用配置

title

文字样式（textStyle）、标题边框（borderWidth等）、标题位置（left/top...）

tooltip

是一个提示框组件，用于配置鼠标滑过或点击图表时的显示框

注意：tooltip用div显示，所以可能会发生样式冲突

触发类型：trigger（item,axis）

触发时机：triggerOn（mouseover,click）

格式化：formatter（支持字符串模板和回调函数）

echarts.apache.org/zh/option.h…

toolbox

是一个工具栏，内置有导出图片(SaveAsImage)、数据视图(dataView)、动态类型切换(magicType)、数据区域缩放(dataZoom)和重置(restore)5个工具

magicType只能切换bar、line、stack

legend

图例，配合series系列使用，用于筛选系列

legend提供data数组，元素是series中值的name

柱状图bar

设置x，y轴数据类型以及数据源，然后设置ytpe为bar

最大/小值设置：

markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},

平均值线设置：

markLine: {data: [{type: 'average', name: '平均值'}]},

数值显示label：

label: {show:true}

同时还可以设置柱状图排列方向、柱宽度（barWidth）等

折线图line

一般用折线图来表现变化趋势

同样有markPoint, markLine, label，同时有标注区间（markArea）,data中的元素是一个数组，里面是开始和结束的位置，用键值对形式

markArea: {data: [[{xAxis:'a'},{xAxis:'b'}],]},

同时可以设置lineStyle，areaStyle等样式

y轴可以支持缩放，脱离0值开始的比例： scale: true

series中元素支持堆叠，只要设置同样的stack值就可以了，比如都为 stack: 'sale'

散点图scatter

一般用来表现变量之间的相关性

数据是一个二维数组 [[h1,w1],[h2,w2],[h3,w3]...]

xy轴都是value

symbolSize可以使不同散点之间的大小不同，支持回调函数

symbolSize: arg => {
    let height = arg[0]/100;
    let weight = arg[1];
    let bmi = weight / (height * height)
    if(bmi > 28) {
        return 20
    }else{ return 5}
}

itemStyle也可以支持回调函数，可以用来改变颜色等

涟漪动画效果：type: effectScatter,然后设置rippleEffect来配置动画

直角坐标系配置

grid

用来控制坐标系的布局和大小，xy轴基于grid展示

show: true展示网格

left等可以调整位置

同时也可以直接设置大小

axis

一个ggrid中最多有两种位置的x轴和y轴

type: value直接从series的data中读取数据，category需要设置data数据

position设置位置 x(top/bottom), y(left/right)

dataZoom

可以在toolbox中配置dataZoom，但是也可以

dataZoom可以数组，可以配置多个区域缩放器

type(slider/inside)，slider生成底部滑块进行缩放，inside使用鼠标滚轮进行缩放

可以指明产生作用的轴，(y/x)AxisIndex,只有一个就是0

可以使用start和end（百分比数字）来指定初始缩放状态

饼图pie

饼图的数据应该是一个数组，里面的元素是一个对象，拥有name和value，如 data = [{name:'a', value: 111}, {name: 'b', value: 222}]

配置label的formatter可以改变文字显示（arg.name,value,percent）

可以设置radius来实现圆环，radius: [内圆半径, 外圆半径]

南丁格尔图（不同半径的圆块） roseType: 'radius'

选中效果： selectedMode: 'single（选中偏离原点一小段距离，离开返回）/mutiple（多个效果同时存在）'，selectedOffset设置偏离距离

地图map

可以使用矢量地图或者百度地图的api

需要将矢量地图素材（json格式）放在json/map下
使用jQuery ajax获取

$.get('json/map/china.json', chinajson => {
  echarts.registerMap('chinaMap', chinajson)  
})

3.在option的geo下设置 type为map，map指向chinaMap

常用配置项：

roam：true 可拖动效果

label： {show: true}展示名称并进行相关格式化

zoom：设置初始缩放大小

center：配置中心点的经纬度数组

一般需要配置series来实现更多功能，一般会给data一个数组，里面是包含name和需要展示深浅颜色的value的对象，然后将series关联到geo geoIndex: 0, type: 'map'，最后配置visualMap,配置max/min和inRange的color

visualMap: {
    min: 0,
    max: 300,
    inRange: {color: ['white', 'red']},
    calculabe: true //使用滑块实现动态筛选
}

雷达图radar

定义各个维度的最大值 indicator: [{name: 'x', max: 100},{}]
准备具体的数据 data: [name: 'a', value: [60,70,...], {}]
设置series的type为radar

常用配置：label，areaStyle, shape（最外部形状，有polygon,circle等）

仪表盘图gauge

准备数据设置给series下的data，这是指针所指向的位置 data: {[value: 97]}
设置series的type为gauge

常用配置：min, max, itemStyle（指针样式）

主题设置

echarts提供了内置主题（light，dark），同时也可以自定义主题

主题可以在init时指定 var echart = echarts.init(dom,'light')

自定义主题配置

在主题编辑器echarts.apache.org/zh/theme-bu…
下载主题为js文件
引入js文件，在init中以名字引入使用

调色盘

调色盘是一组颜色，图形和系列都会从中选择颜色，有主题调色盘、全局调色盘和局部调色盘

全局调色盘在option中配置color数组，会覆盖主题调色盘 option = {color: ['red', 'pruple',...]}

局部调色盘在series的某个元素中设置，同样是color数组

颜色也可以设置渐变

线性渐变：(x,y)到(x2,y2)的方向指定渐变方向，offset代表百分比，所以1是100%，如果 globalCoord 为 true，则该四个值是绝对的像素位置

itemStyle: {
    color: {
        type: 'linear',
        x:0,y:0,x2:0,y2:1,
        colorStops: [{offset:0, color: 'red'}, {offset:1, color: 'blue'}],
        globalCoord: false
    }
}

样式

样式分为直接样式和高亮样式（鼠标滑过/点击效果）

用itemStyle，textStyle等设置直接样式

高亮样式就是设置emphasis对象，中间包含itemStyle等设置样式

自适应

监听窗口大小变化
在事件处理函数中调用echarts实例对象的resize方法

window.onresize = mChart.resize

动画

加载动画

加载动画是在数据还未加载完时显示的动画

mChart.showLoading()显示加载动画,mChart.hideLoading()隐藏加载动画

在ajax请求前用show，得到请求数据后用hide

增量动画

是数据改变时展示的动画

比如buttton的onclick事件的回调函数中，可以用option指向新数据（其他相同项不需要重复，因为新旧option会合并），再用setOption展示增量动画

动画常用配置项

animation：false关闭动画（默认为true）

animationDuration： 3000 毫秒动画时长，也可以使用回调函数产生不同时长的动画效果，arg是元素编号

animationEasing： ‘linear' 缓动动画，设置贝塞尔曲线

animationThreshold： 8 设置阈值，单种元素数量大于阈值就会关闭动画

交互api

全局echarts对象的方法：init，registerTheme，registerMap，connect

connect可以将多个图表进行关联 echarts.connect([mchart, nchart])，保存/刷新等操作时会同时响应

echarts实例对象的方法：setOption，resize，on/off，dispatchAction，clear，dispose

on/off用于绑定或者解绑事件，事件可以是原生的事件（click，mousemove等），也可以是echarts事件echarts.apache.org/zh/api.html…

mchart.on('click',arg => {})

dispatchAction用于模拟用户的动作，传入行为类型type，seriesIndex为图表索引，dataIndex为某一部分的单独行为

clear清空当前实例，但是可以用setOption快速的重新绘制，但是dispose不能

Echarts基本使用