一、介绍
ECharts是一个基于 JavaScript 的开源可视化图表库，能够比较方便的构建柱状图、饼图、折线图等，用于数据可视化的展示。
二、基本认识
1.引入echarts的js文件，然后就可以获取一个名为echarts的对象，如
<script src="/ajax/libs/echarts/5.1.2/"></script>
2.准备一个设置宽高的容器。
<div style="width: 600px; height: 400px;"></div>
3.使用echarts对象的init()方法，传递容器DOM对象，获得echarts实例。
let myEchart = echarts.init(document.querySelector('div'))实例调用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中，进行统一管理，方便复用。使用时，使用配置项进行配置。
-
<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>
内置组件的使用
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>
