一、介绍
ECharts是一个基于 JavaScript 的开源可视化图表库，能够比较方便的构建柱状图、饼图、折线图等，用于数据可视化的展示。
二、基本认识
1.引入echarts的js文件，然后就可以获取一个名为echarts的对象，如
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
2.准备一个设置宽高的容器。
<div style="width: 600px; height: 400px;"></div>
3.使用echarts对象的init()方法，传递容器DOM对象，获得echarts实例。
let myEchart = echarts.init(document.querySelector('div'))4.echarts实例调用setOption()方法，传入配置对象进行图表的绘制。
<!-- 容器 -->
<div style="width: 600px; height: 400px;"></div>
<script>
console.log(echarts);
let myEchart = echarts.init(document.querySelector('div'))
myEchart.setOption({
// 标题配置
title:{
text:'数据可视化',
textStyle:{
color:'red'
},
left:'center'
},
// x轴
xAxis:{
data:['电脑','手机','平板','固定电话']
},
yAxis:{},
series:{
type:'bar',
data:[10,20,30,40]
}
})
</script>三、基本使用
1.多个容器展示多个图表
只需要设置多个容器即可。
2.一个容器展示多个图表
在series配置项中配置多个类型的图表即可实现。
其中饼图的一些参数：
center：设置饼图中心的位置，可以设置数字或百分比（字符串）
radius：设置内外半径
width：设置饼图的宽度
left：设置饼图距离容器的左侧的距离
<div style="width: 600px; height: 500px;" class="box"></div>
<script>
const box = document.querySelector('.box')
const myEchart = echarts.init(box)
myEchart.setOption({
title: {
text: '一个容器展示多个图表',
left: 'center',
textStyle: { color: 'red' }
},
xAxis: {
data: ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸']
},
yAxis: {},
series: [
{
type: 'pie',
// 饼图中心坐标
center: ['80%', '15%'],
// 第一个参数是内半径，第二个是外半径
radius: [0,'10%'],
data: [
{ name: '甲', value: 12 },
{ name: '乙', value: 35 },
{ name: '丙', value: 20 },
{ name: '丁', value: 13 },
{ name: '戊', value: 20 },
],
// 饼图距离容器左侧的距离
left:100,
// 饼图的宽度
width:400
},
{
type: 'bar',
data: [10, 20, 40, 5, 30, 10, 25, 65, 80, 40],
},
{
type: 'line',
data: [2, 10, 36, 20, 95, 43, 25, 65, 75, 12],
}
]
})
</script>
3.使用dataset数据集展示上一个例子
dataset是echarts4.0新增的属性，用于将多个图表的数据放置在一个dataset中，进行统一管理，方便复用。使用时，使用series.encode配置项进行配置。
<div style="width: 600px; height: 500px;" class="box"></div>
<script>
const box = document.querySelector('.box')
const myEchart = echarts.init(box)
myEchart.setOption({
title: {
text: '一个容器展示多个图表',
left: 'center',
textStyle: { color: 'red' }
},
// 设置字符集，让多个图形的数据存放在一起
dataset: {
source: [
['甲', 10, 2, '甲', 12],
['乙', 20, 10, '乙', 35],
['丙', 40, 36, '丙', 20],
['丁', 5, 20, '丁', 13],
['戊', 30, 95, '戊', 20],
['己', 10, 43],
['庚', 25, 25],
['辛', 65, 65],
['壬', 80, 75],
['癸', 40, 12],
]
},
xAxis: {
// data: ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸']
// 设置type，则自动取第一维度的数据
type:'category'
},
yAxis: {},
series: [
{
type: 'pie',
// 饼图中心坐标
center: ['80%', '15%'],
// 第一个参数是内半径，第二个是外半径
radius: [0, '10%'],
// data: [
// { name: '甲', value: 12 },
// { name: '乙', value: 35 },
// { name: '丙', value: 20 },
// { name: '丁', value: 13 },
// { name: '戊', value: 20 },
// ],
// 使用dataset
encode:{
// 第二维度映射饼图的名字
itemName:3,
// 第四维度映射饼图的值
value:4
},
// 饼图距离容器左侧的距离
left: 100,
// 饼图的宽度
width: 400
},
{
type: 'bar',
// data: [10, 20, 40, 5, 30, 10, 25, 65, 80, 40],
// 使用dataset
encode: {
// 第二例映射到y轴
y: 1
},
},
{
type: 'line',
// data: [2, 10, 36, 20, 95, 43, 25, 65, 75, 12],
encode: {
// 第三例映射到y轴
y: 2
},
}
]
})
</script>4.echarts内置组件的使用
echarts内置组件作为配置项进行配置使用。
tooltip：提示框组件；toolbox：工具栏组件；
legend：图例组件（切换不同类型的图形展示，如折线图与柱状图）；
dataZoom：区域缩放组件；visualMap：视觉映射组件；
<div style="width: 800px; height: 500px;"></div>
<script>
let dom = document.querySelector('div')
echarts.init(dom).setOption({
title: {
text: 'echarts组件',
left: 'center',
textStyle: { color: 'red' }
},
xAxis: {
data: ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸']
},
yAxis: {},
series: [
{ type: 'bar', data: [10, 20, 30, 40, 20, 15, 36, 65, 45, 12], color: 'red', name: 'bar' },
{ type: 'line', data: [20, 10, 30, 10, 5, 94, 52, 61, 35, 12], color: 'green', name: 'line' }
],
// 提示框组件
tooltip: {
textStyle: {
// 提示框文字颜色
color: '#000'
}
},
// 图例组件
legend: {
left: '70%'
},
// 工具栏组件
toolbox: {
show: true,
top: 25,
left: '70%',
feature: {
dataZoom: {
yAxisIndex: "none"
},
dataView: {
readOnly: false
},
magicType: {
type: ["line", "bar"]
},
restore: {},
saveAsImage: {},
},
iconStyle: { color: 'cyan' }
},
// 区域缩放组件
dataZoom: {
type: 'slider'
},
// 视觉映射组件
visualMap: {
left: '90%',
top: 200,
type: 'continuous',
min:10,
max:150,
text:['高','低'],
color: ['red', 'orange', 'yellow']
}
})
</script>
5.多个坐标轴-两个y轴
将yAxis配置向设置为数组格式，在series中使用yAxisIndex单独指定坐标轴。
<div style="width: 500px; height: 400px;"></div>
<script>
echarts.init(document.querySelector('div')).setOption({
title: {
text: '双坐标体系-双y轴',
left: 'center'
},
xAxis: {
data: ['天', '地', '玄', '黄']
},
yAxis: [
{
// 显示坐标轴轴线
axisLine:{show:true},
// 显示y轴刻度点（不是数字）
axisTick: {show:true}
},
{
// 显示坐标轴轴线
axisLine:{show:true},
// 显示y轴刻度
axisTick: {show:true}
}
],
series: [
{
type: 'bar',
data: [10, 25, 15, 30],
// 指定柱状图使用哪个坐标轴
yAxisIndex:0
},
{
type: 'line',
data: [51, 65, 35, 84],
// 指定折线图使用哪个坐标轴
yAxisIndex:1
}
]
})
</script> 
