ECHARTS的安装和使用

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为line

series.type为bar时候的效果

series.type为bar

series.type为pie时候的效果

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

图例legend

option的配置如下：

legend: {

data: ['折线图', '饼图']

},

(3)：提示框 tooltip

提示框 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'}

]

)

},