ECharts的特性：Echarts,一个使用javaScript实现的开源可视化库，可以流畅的运行在pc和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11,Chrome,Firefox,Safari等），底层依赖轻量级的矢量图形库，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
官网地址：https://www.echartsjs.com/index.html先下载echarts.min.js
echarts应用场景的使用：
1.在jquery下使用直接引入jquery.js文件和echarts.min.js文件
1.1引入ECharts<script src="echarts.min.js"></script>
1.2绘制一个简单的图表，在绘图前我们需要为ECharts准备一个具备宽和高的DOM容器。
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(‘main‘));
// 指定图表的配置项和数据
var option = {
title: {
text: ‘ECharts 入门示例‘
},
tooltip: {},
legend: {
data:[‘销量‘]
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: ‘销量‘,
type: ‘bar‘,
data: [5, 20, 36, 10, 20]
}]
};
//每次窗口大小改变的时候都会触发onresize事件，这个时候我们将echarts对象的尺寸赋值给窗口的大小这个属性，从而实现图表对象与窗口对象的尺寸一致的情况
window.onresize = echart.resize;
// 使用刚指定的配置项和数据显示图表。
myChart.setoption(option);
</script>
学习ECharts主要学习其配置项和api，推荐先学习配置项了解其内部的属性在学习api
其中主要学习的echarts的基本配置，也是我认为学习echarts主要掌握的配置项。
其中xAxis:{} yAxis:{} series:{} 是绘图中必不可少的配置项。
每次窗口大小改变的时候都会触发onresize事件，这个时候我们将echarts对象的尺寸赋值给窗口的大小这个属性，从而实现图表对象与窗口对象的尺寸一致的情况
window.onresize = echart.resize;其写法在传统的html中配合js和jquery使用。
在传统的html中使用jquery或js完成对echarts的前后端交互，其实和jquery
的正常ajax交互一样。
Echarts 配合 jquery 交互的demo 网站：https://www.cnblogs.com/hjptopshow/p/7943235.html
2.在vue-cli(简称vue脚手架)中使用Echarts中的使用方法：
2.1 先创建vue-cli 项目创建vue-cli项目的教程网
站:https://www.jianshu.com/p/c275414839dc
运行项目之后下载Echarts，在操作这步的时候要注意在vue脚手架中看清楚自
己下载的Echarts版本，版本2.0.0下会报错，图表无法生效。
这时则需要看vue脚手架中的Echarts版本了。
创建好vue-cli项目之后再package.json文件中找到在vue脚手架中echarts
的版本，目前推荐使用最新版本的4.2.1版本。确认在vue-cli中是最新的版本
之后开始下载Echarts包
Echarts NPM命令下载: npm install echarts --save
下载完成后 全局引入 在vue-cli的main.js中引入
新建一个World.vue组件(这个vue自己随意创建)
直接上代码：
这就是一个柱状图的demo,直接启动项目可以看到如图：
在vue-cli中的Echarts使用已经实现。
接下来则要对 Vue中如何进行Echarts进行数据交互。
数据交互的演示demo网站：https://www.cnblogs.com/samve/p/10884748.html
用axios进行请求，在vue-cli中用数据交互请求的话最好用用vue-cli的三方库axios工具请求，对vue比较友好，jquery的ajax也是可以用但是推荐使用axios.
在echarts中图形的绘制有多重类型
基础类型图有：
折线图 柱状图 饼图 散点图 地理坐标/地图 k线图 雷达图 盒须图 热力图
关系图 路径图 树图 矩形树图 旭日图 平行坐标系 桑基图 漏斗图 仪表盘 象形柱图
主题河流图 日历坐标系
入上图的demo 和样式在如下链接：
https://www.echartsjs.com/examples/#chart-type-funnel
其中 除了盒须图 地理坐标/地图 平行坐标系 是需要引入特定的js文件配合使用之外其他图的用法大同小异。
盒须图的用法：
在自己的html文件下引入一个dataTool.js工具其他js就按需引入则可以正常使用。
地理坐标/地图的用法：
为什么会用百度地图而不用高德地图?
因为echarts的团队是百度的，所以用的肯定就是自家的地图了。
需要引入
bmap.js是echarts给百度地图写的js
加入百度地图的api秘钥链接 这里的秘钥自己可以在百度开发者账号中自己申请。
如果地图的数据是json数据的话，则需要用ajax方式去获取数据之后再做如上操作。
平行坐标系的用法：
在平行坐标系的demo中牵扯到世界地图的使用，所以在这类图中要使用世界地图的js。
由于世界地图的数据来自第三放，数据不符合国家《测绘法》规定，目前是下不了的，
但是在最新的echarts 4.2.1中的js包中有世界地图的js所以直接下载最新版本的echarts则可找到世界地图的js。文件名叫 world.js
如图:
其他的图 如 折线图 柱状图 散点图 饼图
其中最核心的就三个点：
xAxis： {
data:[] 类目轴 所有类目名称列表
} 设置x轴属性
yAxis: {
data:[] 类目轴 所有类目名称列表
} 设置y轴属性
Series: [
type: ‘’每个系列通过type决定自己的图表类型。
] 系列列表。
