ECharts的基本使用
1.ECharts的快速入门
(1)使用步骤：
①引入echarts.js文件
②准备一个呈现图表的盒子
③初始化echarts实例对象
④准备配置项（在配置其他图表的时候，只有这一项是不一样的）
⑤将配置项设置给echarts实例对象
(2)相关配置
xAxis:直角坐标系中的x轴
yAxis:直角坐标系中的y轴
series:系列列表。每个系列通过type决定自己的图表类型
// ④准备配置项
var option={
title:{
text:'成绩',
// 指定窗口打开主标题超链接
link:'http://baidu.com'
},
xAxis:{
type:'category', //category代表的是类目轴，也就是表中小红、小明、小王三类
data:['小明','小红','小王'],
},
yAxis:{
type:'value' //数值轴，设置为数值轴之后不需要设置data属性，会根据xAxis中对应的类到series中找到对应的值
},
// series主要是配置给y轴的数据
series:[
{
name:'语文',
type:'bar', //柱状图
data:[80,73,93]
}
]
}
2.ECharts的常用图表
7大图表：
柱状图、折线图、散点图、饼图、地图、雷达图、仪表盘图
图表通用配置：
-
标题：title
文字样式：textStyle
标题边框：borderWidth borderColor borderRadius
标题位置：left、top、buttom、righttitle:{ text:'成绩', textStyle:{ color:'green', fontStyle:'italic', fontWeight:'bolder', fontFamily:'Arial', fontSize:30, textShadowBlur:15, textShadowOffsetX:10, textShadowOffsetY:10 }, borderWidth:5, borderColor:'blue', borderRadius:5, left:30, top:10, }, -
提示：tooltip
触发类型：trigger(item, axis)
触发时机：triggerOn(mouseover、click)
格式化：formatter(字符串模板、回调函数)tooltip:{ // trigger:'item' //要把鼠标移动到柱子的内部才会显示 trigger:'axis', //只要鼠标在这个坐标轴上，就会显示 triggerOn:'click', //点击之后才会有提示 //formatter:'haha', //点击提示框，会显示'haha',也就是formatter中的内容决定了提示框中的内容 // formatter:'{b}的{a}成绩是{c}' //这个是字符串模板 formatter:function(arg){ console.log(arg); //通过这个打印可以看出来这个arg是一个数组 // 这个回调函数同样可以实现点击柱子之后提示框中的内容为’XXX的成绩是XX‘ return arg[0].name+"的成绩是"+arg[0].data } },关于字符串模板和回调函数在官网的手册中有很多https://echarts.apache.org/zh/option.html#tooltip.formatter
-
工具按钮：toolbox
它是ECharts提供的工具栏，内置有导出图片、数据视图、动态类型切换、数据区域缩放重置这五个工具。
显示工具栏的按钮为featuretoolbox:{ // feature为显示工具栏的按钮 feature:{ saveAsImage:{}, //导出图片 括号里面什么都不需要配置，直接写出这个对象就可以 // 这个数据视图中可以修改原始数据，修改之后在图表中展示的就是修改过后的数据 dataView:{}, //数据视图 括号中不需要配置 // 这个重置可以将数据重置为原先的数据，比如使用数据视图修改过后的数据，可以使用这个功能再次复原为原始数据 restore:{}, //重置 括号中不需要配置 dataZoom:{},//区域缩放 鼠标选取柱状图中某部分，这部分可以被放大 magicType:{ //动态切换图表类型，这个对象中需要配置是在哪几个图表中切换 type:['bar','line'] } } }, -
图例：legend
用于筛选系列，需要和series配合使用
legend中的data是一个数组，且legend中的data的值需要和series数组中的某组数据的name值（也就是系列名称）一致（字符串匹配）legend:{ data:['语文','数学'] }, series:[ { name:'语文', type:'bar', data:[88,92,63,77,94,80,72,86] }, { name:'数学', type:'bar', data:[90,80,40,50,87,92,83,78] } ]这样显示出来的图例才能够起到筛选的作用，当鼠标点击语文这个图例筛选出来的就是数学成绩的单图，同样点击数学图例，就筛选出了语文成绩，两个都勾掉，就什么数据都没有显示。
(1)柱状图
<head>
<!--1.引入echarts文件 -->
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<!-- 2.准备一个呈现图表的盒子 -->
<div style="width: 600px;height: 400px;"></div>
<script>
// ③初始化echarts实例对象
var mCharts=echarts.init(document.querySelector('div'))
// ④准备配置项
var option={
xAxis:{
type:'category',
data:['张三','李四','王五','闰土','小明','茅台','二妞','大强']
},
yAxis:{
type:'value'
},
series:[
{
name:'语文',
type:'bar',
data:[88,92,63,77,94,80,72,86]
}
]
}
// ⑤将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
常见效果：
①标记：最大值，最小值，平均值
markPoint是标记最大值最小值，markLine是标记平均值
需要在series中设置：
series:[
{
name:'语文',
type:'bar',
markPoint:{
data:[
{
type:'max',name:'最大值'
},{
type:'min',name:'最小值'
}
]
},
markLine:{
data:[
{
type:'average',
name:'平均值'
}
]
},
data:[88,92,63,77,94,80,72,86]
}
]
②显示：数值显示 柱宽度 横向柱状图
数值显示(在series中设置)
// label主要设置的是柱子上的数值文本
label:{
show:true, //显示每个柱子的数值，也就是高度
rotate:60, //柱子上的文本会以60°的方式旋转
position:'top', //inside 表示文本会显示在柱子的内部，也就是它的默认值 ,top就会将文本显示在柱子的上面
},
柱子宽度（在series中设置）
// 设置柱子的宽度
barWidth:'70%',
设置为横向柱状图，其实只需要将xAxis和yAxis中的内容互换就可以了
xAxis:{
type:'value'
},
yAxis:{
type:'category',
data:['张三','李四','王五','闰土','小明','茅台','二妞','大强']
},
柱状图总结：
基本的柱状图
-
基本的代码结构
-
x轴和y轴的数据
-
series中的type设置为’bar’
常见的效果
-
最大最小值使用markPoint
-
平均值使用markLine
-
数值的显示使用label
-
柱的宽度使用 barWidth
柱状图的特点：
-
描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以清晰地看出每个人类数据的排名情况
（2）折线图
实现步骤：
- ECharts最基本的代码结构：引入js文件，准备DOM容器，初始化对象，设置option（这里的配置项是空的）
- 准备x轴数据
- 准备y轴数据
- 图表类型：在series中设置为type:line
常见效果：
①标记：最大值/最小值(markPoint) ，平均值(markLine)，标注区间(markArea)
这些都是要写在series中的，牢记
markPoint:{
data:[
{
type:'min',name:'最小值'
},
{
type:'max',name:'最大值'
}
]
},
markLine:{
data:[
{
type:'average',name:'平均值'
}
]
},
markArea:{
data:[
// 这两个数组代表的是标记的两个区间
[
// 数组中内容是对象，对象中写的是x轴中标记的起始月份和结束月份
{xAxis:'1月'},
{xAxis:'2月'}
],
[
{xAxis:'7月'},
{xAxis:'9月'}
]
]
}
②线条控制：平滑(smooth) 风格(lineStyle)
这些都是要写在series中的，牢记
smooth:true, //平滑
lineStyle:{
color:'skyblue',
type:'dashed', //线条组成形式 默认是实线solid 还有dotted dashed
}
③填充风格(areaStyle)
这些都是要写在series中的，牢记
//areaStyle中可以什么都不设置，就能够出来效果
areaStyle:{
color:'skyblue'
}
④紧挨边缘(boundaryGap)
这个因为是要设置x轴上对应数值的呈现，因此设置在xAxis类目轴中
这个意思是说，比如折线图中的类目轴中也就是x轴的第一个元素的呈现出来的数值直接挨着y轴，如果不设置，默认这个转折点是在类目轴某个元素的两端之间的，并没有在两个端点上。
xAxis:{
type:'category',
data:xData,
boundaryGap:false
},
⑤缩放 脱离0值比例(scale)
如果y轴换一组数据，换为一组相差不够大的数据，比如[3005,3000,3010,3015,3050,3030,3034,3009,3026,3039,3007,3040],那么折线图就基本上是一条直线了。可以设置scale为true,让y轴不要从0开始，就锁定在一个区间中。
这个要在yAxis中设置
yAxis:{
type:'value',
scale:true
},
⑥堆叠图(stack)
在series中设置
series是一个数组，那就意味着在series中可以设置多组数据，现在在数组中多添加一组数据，那么这两个折线图很容易就会有交叉，这样就显得杂乱无章，其实第二组数据可以不需要以y轴的0为起始点，可以以上一组数据为基础，向上移动第二组数据中的相应数值，那么这两个折线图就必然不会有重叠，这两个折线图对应转折点上下之间的距离其实就是第二组数据中相应的数值。是第二个图表基于第一个图表之上y轴的累加。
series:[
{
name:'康师傅的销量',
type:'line',
data:yData,
stack:'all',
areaStyle:{}
},
{
name:'统一的销量',
type:'line',
data:yData2,
stack:'all',
areaStyle:{}
}
]
折线图的特点：
折线图常用来分析数据随时间的变化趋势
(3)散点图
特点：散点图可以帮助我们推断出变量间的相关性，比如身高和体重。散点图还经常用于地图的标注上。
实现步骤：
-
首先是ECharts的最基本的代码结构
-
x轴和y轴的数据：二维数组
数组1：[[身高1，体重1]，[身高2，体重2]，…]
-
图表类型：在series中设置type:scatter xAxis和yAxis的type都要设置为value
-
调整：将坐标轴都设置为脱离0值比例，scale
var option={ xAxis:{ type:'value', // 脱离0值处理 scale:true }, yAxis:{ type:'value', scale:true }, series:[ { type:'scatter', data:axisData } ] }
常见效果：
①气泡图效果(在series中设置)
这个效果要满足两个条件：散点的大小不同(symbolSize)、散点的颜色不同(itemStyle.color)
想要根据不同散点数值的大小控制气泡的大小，symbolSize的值就不能固定。
// 控制散点的大小使用symbolSize,但是想要使用气泡效果，要根据不同散点的数值来控制气泡的大小
// symbolSize使用回调函数
symbolSize: function (arg) {
// console.log(arg);
// 我们根据BMI来判断一个人的肥胖与否
// 身高需要单位为米，体重单位是千克
var height = arg[0] / 100
var weight = arg[1]
// BMI= 体重kg/(身高m * 身高m) 大于28表明肥胖
var bmi = weight / (height * height)
if (bmi > 28) {
return 20
}
return 10
},
控制散点颜色使用itemStyle
// 控制散点颜色使用itemStyle
itemStyle:{
color:function(arg){
// 我们根据BMI来判断一个人的肥胖与否
// 身高需要单位为米，体重单位是千克
var height = arg.data[0] / 100
var weight = arg.data[1]
// BMI= 体重kg/(身高m * 身高m) 大于28表明肥胖
var bmi = weight / (height * height)
if (bmi > 28) {
return 'red'
}
return 'green'
}
}
②涟漪动画效果(在series中设置)
设置type : effectScatter
设置这个涟漪动画，需要在series中设置type为effectScatter，来替换原来的type:scatter
设置完type之后，要设置showEffectOn：'emphasis’来控制涟漪动画产生的时机； 使用rippleEffect:{}来控制涟漪动画作用的范围大小。
series: [
{
// type: 'scatter',
type: 'effectScatter',
// 控制涟漪动画产生的时机
showEffectOn:'emphasis', //render代表每一个散点渲染完成之后就自动拥有涟漪动画的效果 emphasis代表当鼠标一路划过的时候才能够产生涟漪动画效果
// 使用rippleEffect来控制涟漪动画的作用范围的大小
rippleEffect:{
// 缩放比例是7
scale:7
},
}
]
直角坐标系中的常用配置
直角坐标系图表：带有x轴和y轴的图表，有柱状图、折线图、散点图
-
配置1：网格grid(在option中配置)
grid是用来控制直角坐标系的布局和大小
x轴和y轴就是在grid的基础上进行绘制的
① 显示gird 使用show
②grid边框 使用borderWidth、borderColor
③grid的位置和大小 使用top/left/right/buttom height/width (gird大小发生变化，图标大小也会发生变化)
var option={ grid:{ // 呈现出来 show:true, // 边框的宽度和颜色 borderWidth:10, borderColor:'skyblue', // 通过控制网格的位置和大小 gird大小发生变化，那么图表的大小也会发生变化 left:100, top:100, width:300, height:200 }, } -
配置2：坐标轴axis
x轴和y轴其实就是依附grid来显示的，一个grid中最多有两种位置的x轴和y轴
坐标轴类型type：首先有value：数值轴，自动会从目标数据中读取数据（从series中data中读取数据）；category：类目轴，该类型必须通过data设置类目数据。
显示位置position：在xAxis中可以取值top或者buttom,在yAxis中可以取值left或者right
-
配置3：区域缩放dataZoom
dataZoom用于区域缩放，对数据范围过滤，x轴和y轴都可以拥有
dataZoom是一个数组，意味着可以配置多个区域缩放器
这里所说的dataZoom和之前在通用配置所说的toolbox下的dataZoom有所不同，这个dataZoom直接在option之下配置。
①type：这个dataZoom下的type可以设置为slider,也就是滑块的意思，在横坐标下会多一个滑块左右选取区域。
type也可以设置为inside，那么这个时候使用鼠标的滚轮或者双指缩放进行图表内部数据的筛选.
dataZoom:[ { type:'slider' // type:'inside' }, ],②指明产生作用的轴
dataZoom是一个数组，那么其实可以有多个元素，想要指定在y轴也产生这样的区域缩放，不仅要添加一个元素，还要在其中指定作用于哪一个轴。
xAxisIndex:设置缩放组件控制的是哪一个x轴，一般写0即可，一般也就只有一个x轴
yAxisIndex:设置缩放组件控制的是哪一个y轴，一般写0即可。
dataZoom:[ { type:'slider', // type:'inside' xAxisIndex:0 }, { type:'slider', // type:'inside' yAxisIndex:0 }, ],③指明初始状态的缩放情况
在没有配置这项内容的时候，默认在初始状态下是显示全部数据的。
在dataZoom中加上这两个内容：
start：数据窗口范围的起始百分比
end：数据窗口范围的结束百分比
dataZoom:[ { type:'slider', // type:'inside' xAxisIndex:0, }, { type:'slider', // type:'inside' yAxisIndex:0, start:0, end:80 }, ],
(4)饼图
特点：帮助用户快速了解不同分类的数据占比情况
实现步骤：
-
Echarts最基本的代码结构
-
数据准备：[{name:“淘宝”,value:11231},{name:“京东”,value:22673}]是由name和value组成的对象形成的数组
-
图表类型series中type:pie
// 准备数据，是一个数组，数组中包含一个有一个对象，每一个对象中，需要有name和value var pieData = [ { name: '淘宝', value: '11023' }, { name: '京东', value: '22023' }, { name: '1号店', value: '8989' }, { name: '唯品会', value: '6123' }, { name: '聚美优品', value: '6700' }, ] // 4.准备配置项 var option = { // 因为饼图不是直角坐标系图表，不需要设置x轴和y轴，设置series就可以了 series: [ { type: 'pie', data: pieData } ] }
常见效果：
①显示数值(label.formatter)
要饼图中每一个区域显示不同的信息，因为饼图默认就会显示准备数据的name值，想要显示更多内容就需要使用formatter来调用回调函数。
series: [
{
type: 'pie',
data: pieData,
label:{ //饼图文字显示
show:true, //显示文字
formatter:function(arg){ //决定文字显示内容
// console.log(arg);
return arg.name+arg.value+'元\n'+'占比'+arg.percent+'%'
}
}
}
]
②圆环
设置两个半径radius:[‘50%’,‘70%’]
series: [
{
type: 'pie',
data: pieData,
// radius:20 //设置饼图的半径
// radius:'20%' //这里这个百分比参照的是承载这个饼图的盒子的宽度和高度中较小的那部分的一半来进行百分比设置
// 设置圆环
radius:['50%','70%'] //这个数组中第0个元素代表的是内圆的半径，第1个元素代表的是外圆的半径
}
]
③南丁格尔图
也就是饼图中每一个部分的半径不一样，半径大小取决于每一部分的数值大小
series: [
{
type: 'pie',
data: pieData,
roseType:'radius' //南丁格尔图 饼图中每一个区域的半径是不同的
}
]
④选中效果
选中模式：selectedMode:single/multiple
选中偏移量：selectedOffset:30
series: [
{
type: 'pie',
data: pieData,
// selectedMode:'single', //选中的效果，能够将鼠标点击选中的区域偏离圆点一小段距离
selectedMode:'multiple', //能够选中多个区域偏离圆点
selectedOffset:30 //设置偏移量
}
]
(5)地图
①地图图表的使用方式：
- 百度地图API：需要申请百度地图ak
- 矢量地图：需要准备矢量地图数据
②矢量地图的实现步骤：
- Echarts最基本的代码结构
- 准备中国的矢量地图json文件，放到json/map/的目录下 china.json
- 使用Ajax获取china.json $.get(‘json/map/china.json’,function(chinajson){})
- 在回调函数中往ECharts全局对象注册地图json数据 echarts.registerMap(‘chinaMap’,chinajson)
- 地图不配置series，而是配置geo, geo中设置type:‘map’,map:‘chinaMap’
③常用配置
-
缩放拖动：roam
-
名称显示：label
-
初始缩放比例：zoom
-
地图中心点：center （center所在的数组中存放的是地图中心点所在的坐标）
<script> // 步骤 // 1 Echarts的基本代码结构 （要引入jquery的js文件） // 2 准备中国地图的矢量数据 // 3 使用Ajax获取矢量地图数据 // 4 在Ajax的回调函数中注册矢量地图数据 // 5 配置geo的type为map，map为‘chinaMap’ var myEcharts = echarts.init(document.querySelector('div')) $.get('json/map/china.json', function (ret) { // ret打印出来就是中国各大省份的矢量地图数据 // console.log(ret); echarts.registerMap('chinaMap', ret) // 之所以把option放在这个回调函数体中是因为配置map的时候必须是注册完的json数据， // 这个option配置一定要在注册之后，因此直接放在这个注册代码之后，防止代码发生错误 var option = { geo: { type: 'map', map: 'chinaMap', // 这个chinaMap必须要和registerMap中的第一个参数保持一致 roam:true, //设置允许缩放以及拖动的效果 label:{ show:true //展示标签 }, zoom:2, //设置初始化的缩放比例，这个2就是2倍放大 center:[87.617733,43.792818] //这个center的数据中放的是地图中心点的坐标，这个数据是新疆所在的坐标，也就是以新疆为地图中心点 } } myEcharts.setOption(option) }) </script>
④常见效果
- 显示某个区域(这个代码和上面的代码基本上一致，只需要将矢量地图换为对应省的)
1).加载该区域的矢量地图数据
2).通过registerMap注册到echarts全局对象中
3).指明geo配置下的type和map属性
4).通过zoom放大该区域
5).通过center定位中心点
这个坐标如何找呢，比如找到南阳市的坐标，可以打印出来ret,然后找到Object中feature下的数组中对应的元素中的properties属性下的cp属性。
- 不同城市颜色不同
1).显示基本的中国地图
2).将城市的空气质量数据设置给series(这里要结合series来设置了)
3).将series下的数据和geo关联起来 geoIndex:0 type:‘map’
4).结合visualMap配合使用（这个visualMap类似于区域缩放dataZoom）
<!-- 1.显示中国地图2.将空气质量的数据设置给series下的对象 3.将series下的数据和geo关联起来 4.配置visualMap -->
<div style="width:600px;height:400px"></div>
<script>
// 这个airData中的name是和矢量地图中的ret保持一致的，且顺序都一样,这样才能将series和geo产生关联
var airData = [
{ name: '北京', value: 39.92 },
{ name: '天津', value: 39.13 },
{ name: '上海', value: 31.22 },
{ name: '重庆', value: 66 },
{ name: '河北', value: 147 },
{ name: '河南', value: 113 },
{ name: '云南', value: 25.04 },
{ name: '辽宁', value: 50 },
{ name: '黑龙江', value: 114 },
{ name: '湖南', value: 175 },
{ name: '安徽', value: 117 },
{ name: '山东', value: 92 },
{ name: '新疆', value: 84 },
{ name: '江苏', value: 67 },
{ name: '浙江', value: 84 },
{ name: '江西', value: 96 },
{ name: '湖北', value: 273 },
{ name: '广西', value: 59 },
{ name: '甘肃', value: 99 },
{ name: '山西', value: 39 },
{ name: '内蒙古', value: 58 },
{ name: '陕西', value: 61 },
{ name: '吉林', value: 51 },
{ name: '福建', value: 29 },
{ name: '贵州', value: 71 },
{ name: '广东', value: 38 },
{ name: '青海', value: 57 },
{ name: '西藏', value: 24 },
{ name: '四川', value: 58 },
{ name: '宁夏', value: 52 },
{ name: '海南', value: 54 },
{ name: '台湾', value: 88 },
{ name: '香港', value: 66 },
{ name: '澳门', value: 77 },
{ name: '南海诸岛', value: 55 }
]
var mEcharts=echarts.init(document.querySelector('div'))
//1.
$.get('json/map/china.json',function(ret){
echarts.registerMap('chinaMap',ret)
var option={
geo:{
type:'map',
map:'chinaMap',
label:{
show:true
},
zoom:1.2
},
//2.
series:[
{
type:'map',
data:airData,
//3.
geoIndex:0 //将空气质量的数据和第0个geo配置关联在一起，只有一个geo，因此它的索引号就是0
}
],
//4.
visualMap:{
// 空气质量的最大值和最小值
min:0,
max:300,
inRange:{
// 表明这个颜色会通过数值的大小从白色过渡到红色
color:['white','red'] //控制颜色变化的范围
},
calculable:true //筛选数据，也就是出现滑块效果
}
}
mEcharts.setOption(option)
})
</script>
- 地图和散点图结合
1)给series下增加新的对象（一个容器中可以拥有多个图表）
2)准备好散点数据（这个散点数据实际上就是坐标信息），设置给新对象的data
3)配置新对象的type:effectScatter
4)让散点图使用地图坐标系统
5)让涟漪的效果更加明显
rippleEffect:{ scale:10 }
//添加散点坐标
var scatterData=[
{
value:[117.283042,31.86119]
}
]
series:[
{
type:'map',
data:airData,
geoIndex:0 //将空气质量的数据和第0个geo配置关联在一起，只有一个geo，因此它的索引号就是0
},
{
type:'effectScatter',
data:scatterData, //配置散点坐标数据
coordinateSystem:'geo', //指明散点使用的坐标系统，是geo的坐标系统
rippleEffect:{
scale:10 //配置涟漪效果的缩放比例
}
}
],
(6)雷达图
1）实现步骤：
-
ECharts基本的代码结构
-
定义各个维度的最大值：indicator：[{name:‘易用性’,max:100},…] 这个数组中每一个对象都代表一个维度
-
准备具体产品的数据 data:[{name:‘华为手机’,value:[80,90,80,82,90]},…] value代这个产品的每个维度的数据
-
图表类型：在series下设置type:radar
<script> // 初始化echarts实例对象 var mEcharts=echarts.init(document.querySelector('div')) var dataMax=[{name:'易用性',max:100},{name:'功能',max:100},{name:'拍照',max:100},{name:'跑分',max:100},{name:'续航',max:100}] // 准备配置项 var option={ //配置radar属性 radar:{ //指示器，配置维度最大值 indicator:dataMax }, series:[ { type:'radar', data:[ { name:'华为手机', value:[80,90,80,82,90], }, { name:'中兴手机', value:[70,82,75,70,78] } ] } ] } // 将配置项设置给echarts实例对象 mEcharts.setOption(option) </script>
2）常见配置
- 显示数值label
在series中设置label
label:{
show:true //显示数值
},
- 区域面积areaStyle
在series中设置
areaStyle:{}, //将每一个产品的雷达图形成阴影的面积
- 绘制类型shape
在radar属性中设置
radar:{
//指示器，配置维度最大值
indicator:dataMax,
shape:'circle' //配置雷达图最外层的图形，默认的是polygon多边形
},
3）特点
可以用来分析多个维度的数据与标准数据的对比情况
(7)仪表盘图
仪表盘主要是用在进度把控以及数据范围的监测，可以直观的表现出某个指标的进度或实际情况
1)实现步骤
- Echarts基本代码结构
- 准备数据，设置给series下的data data:[{value:97}]
- 图表类型：在series中设置type:gauge
series:[
{
type:'gauge',
data:[
{
value:97
} //每一个对象都代表一个指针
]
}
]
2)常见效果
-
数值范围 min,max
在series中添加
-
多个指针 增加data中的数组元素
在series中的data中添加
data:[ { value:97, itemStyle:{ //控制指针样式 color:'red' } }, //每一个对象都代表一个指针 { value:80, itemStyle:{ color:'green' } } ], -
多个指针颜色差异 itemStyle
在data中添加一个itemStyle来控制指针的样式
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
