Echarts简介

echarts，是一个使用js实现得开源可视化库，可以流畅的运行在pc和移动设备上，兼容当前绝大部分浏览器（IE9/10/11, Chrome,Firefox,Safari等），底层依赖矢量图形库ZRender,提供直观，交互丰富，可高度个性化定制的数据可视化

下载：

npm install echarts

引入echarts：

在全局引入 import * as echarts from 'echarts';

第三步 设置一个图标容器

首先，在HTML中定义有宽度和高度的容器

// 准备具有大小的容器
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
//获取容器
var myChart = echarts.init(document.getElementById('main'));
</script>

第四步 配置

常用的
title标题

 //图表标题title: {text: 'Echarts快速入门'},

xAxis x轴
直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

xAxis: {data: ['电子', '服装', '食品', '饮料']
},

yAxis y轴
直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠 yAxisIndex:1

 //y轴
yAxis: {min: 0, //最小值max: 500  //最大值
},

series 系列
系列列表，每一个系列通过type来决定自己的图表类型
通俗的理解：图标数据，指定的什么类型的图标，可以多个图标重叠

• 柱形图

{type: 'bar',name: '销量',data: [100, 200, 130, 400]
}, 

• 饼图

{type: 'pie',name: '学习情况分布',//饼图位置 center: ['80%', '13%'],//饼图大小radius: ['10%', '25%'],data: [{name: '中上',value: 12}, {name: '一般',value: 10}, {name: '弱',value: 6}, ]
}

• 折线图

{type: 'line',name: '销售趋势',data: [220, 120, 150, 410],smooth: true
}

legend 图例

注意：legend中的data值来自于series 每个图片的name

legend: {data: ['销量', '学习情况分布', '销售趋势'],
},

Echarts 切换渲染引擎

 const myChart = echarts.init(chartDom, '主题', {renderer: 'canvas或svg'})

dataset特性

可以使用dataset对图标数据做集中管理，不用散落在不同的图表
如果dataset数据集有多种类型数据，可以创建多个source分类管理

dataset例子

Echarts飞线动画

飞线动画主要利用Echarts 中的 series 中的 type 为lines实现得，注意 line后面有个s

Echarts地图

Echarts实现地图方式主要有2种：

• 通过geo属性实现
• 通过series中的type为map实现

 //第一步：导入地图数据import chinaData from './mock/china.js'//第二步：注册地图echarts.registerMap('china',chinaData)//第三步：通过geo展示地图geo:{map:'china',layoutCenter:['50%','60%'],layoutSize:'100%',//鼠标平移roam:'move',//指定选中模式selectedMode:'multiple',select:{label:{color:"#fff"},itemStyle:{areaColor:'#00f'}},