一 定义
echart 是一个图表制作插件，被广泛用于数据可视化项目。使用者可以无需关注它的具体实现原理，只需去调整它option对象里的属性，便能生成丰富漂亮的图表应用。
二 属性
1 常用option属性
其它常用属性比如：背景色，动画，是否显示，文本样式等待
2 工具
3 图表类型
4 坐标系类型
直角坐标系
极坐标系
地理坐标系
三 地图
1 他人总结的资料
2 使用
总结为--引入地图数据---设置地图样式--- 设置要显示在地理坐标系的数据
（1）通过引入地图js的方式
引入echart.js
引入要使用的地图的js（引入后会自动注册地图名字和数据）
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/china.js" type="text/javascript" charset="utf-8"></script>修改地图样式：
geo: {
show: true,
map: 'china',
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#173E72FF',
borderColor: '#02A6B7FF',
borderWidth: '1'
},
emphasis: {
areaColor: '#4499d0',
}
}
},在series中设置
coordinateSystem: 'geo',（2）json方式
引入该json
用registerMap进行手动注册地图和数据
其它使用与js引入基本一致
$.get('map/json/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});（3）Bmap百度地图方式
先引入百度地图API
coordinateSystem的值必须设置为bmap
option中设置bmap样式
bmap: {
center: [108.95, 34.27],
zoom: 6,
roam: true,
label: {
show: true,
},
mapStyle:{
styleJson: mapStyle, // 定义bmap的样式
},
}3 如果需要引入区域地图
4 阿里各省市地图下载资源（很全，json格式）
四 可视化编辑网站
大部分的option属性都可以在该网站直接编辑，显示代码
五 常见问题
1 实现柱状图重叠效果（数据统一标量）
重点：重叠不需要对值做相加处理，只需要将两列值重合
y轴设置最大值，统一了标量
max: maxNum,
barGap: "-100%",
2 实现柱状图上的标签（可自定义）
在series数组的具体对象中，设置label
label: {
normal: {
show: true,
lineHeight: 30,
width: 80,
height: 30,
color: '#ffffff',
position: ['0', '-30'],
distance: 1,
formatter: function(params) {
console.log(params);
var tipHtml = '';
tipHtml = parseInt(activeClassroomNum[params.dataIndex]/allClassroomNum[params.dataIndex]*100) +'%'
return tipHtml;
}
}
}3 颜色线性渐变的实现（任意处）
0,0,0,1 可表示渐变方向，此处表示从上到下的线性渐变
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#0BD7D4'
}, {
offset: 1,
color: '#0199FE'
}]),
}
}5 png 转base64形式
echart基本上只支持这种格式和svg,经常会用到转换
转换网站
6 vue中如下使用echart需要移除监听
任何在vue中用js添加的事件监听，定时器等，都需要去移除。以避免内存的消耗
mounted(){
let self = this
this.echartInstance = echarts.init(document.getElementById('chart-container'));
this.echartInstance.setOption(options)
window.addEventListener("resize",function(){
self.echartInstance.resize() })
}
destroyed(){
window.removeEventListener("resize",this.resizeHandle)
}
心得体会：echart 经常被用来做数据大屏的项目，使用很广。在做数据大屏时，需要对echart的功能点（能做的效果）非常了解。同时也需要对一些常用属性有所了解。倒也不需要强记，只要了解功能点，可以对应echart官方文档，vis.baidu.com/ (在线编辑工具)对样式效果做调整。GL有用到它的三维坐标系，大部分属性与其基本一致。结合百度地图，css3动画效果会做出比较酷的数据大屏应用。
