一定义

echart 是一个图表制作插件，被广泛用于数据可视化项目。使用者可以无需关注它的具体实现原理，只需去调整它option对象里的属性，便能生成丰富漂亮的图表应用。

二属性

1 常用option属性

其它常用属性比如：背景色，动画，是否显示，文本样式等待

2 工具

3 图表类型

4 坐标系类型

直角坐标系

极坐标系

地理坐标系

三地图

1 他人总结的资料

https://juejin.cn/post/6844903746481160199

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 如果需要引入区域地图

https://juejin.cn/post/6844903912294580231

4 阿里各省市地图下载资源（很全，json格式）

http://datav.aliyun.com/tools/atlas/#&lat=27.587110730375844&lng=112.13384628295897&zoom=12

四可视化编辑网站

https://vis.baidu.com/

大部分的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,经常会用到转换

转换网站

http://tool.chinaz.com/tools/imgtobase

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官方文档，https://vis.baidu.com/ (在线编辑工具)对样式效果做调整。GL有用到它的三维坐标系，大部分属性与其基本一致。结合百度地图，css3动画效果会做出比较酷的数据大屏应用。