ECHARTS的安装和使用
官网地址：https://echarts.apache.org/zh/index.html
API地址： https://echarts.apache.org/zh/api.html#echarts
Gallery地址：
https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all
一：安装
安装分为两种方式
1:下载源文件，在<script src=”url”></script>
2:如果使用的是脚手架搭建的项目的话，可以使用npm install echarts进行安装
二：使用
1，基本用法
图表有很多种类型：折线图，柱状图，饼图等
DOM容器
<div id="container" style="height: 100%"></div>
初始化echart
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
配置项option
[if !supportLists]（1）[endif]：series.type line为线图，bar为柱状图，pie为饼图
[if !supportLists]（2）[endif]：series.data对应坐标值
[if !supportLists]（3）[endif]：xAxis.type横坐标值类型
[if !supportLists]（4）[endif]：xAxis.data横坐标轴
[if !supportLists]（5）[endif]：yAxis.type纵坐标值类型
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
setOption
myChart.setOption(option, true);
当前代码series.type为line的的效果
series.type为bar时候的效果
series.type为pie时候的效果
2，其他用法
（1）：折线图和饼图同时使用
option的配置如下：
ooption = {
color: [ '#4cabce', '#e5323e'],
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: '折线图',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}, {
name: '饼图',
data: [800, 802, 911, 904, 1200, 1300, 1300],
type: 'bar',
}]
};
(2)：图例legend
option的配置如下：
legend: {
data: ['折线图', '饼图']
},
(3)：提示框 tooltip
option的配置如下：
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
}
(4)：渐变
option的配置如下：
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
},
