echarts仪表盘如何设置图例(legend)
echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能;
不同段的颜色是通过axisLine->lineStyle->color来设置的;
搜索了很多的资料都没有找到用来标识各颜色段的图例;
反复琢磨,可不可以使用有图例的图来强制加上这个图例呢?
这里熟悉echarts的童鞋可能想到解决方法了;
那我们就来使用一招“移花接木”大法;
主要思想:使用柱状图的legend图例,然后设置柱状图和仪表图的层级,然后再隐藏柱状图,禁用legend的点击事件;
注意点:
1.series中既有type为‘gauge’的配置项,也有type为‘bar’的配置项,而'bar'类型的配置项只要关注其legend的颜色即可;
2.对于柱状图要隐藏的项较多,必须全部设置成不显示,其中包括轴线和分割线等;
3.防止奇怪的体验最好将legend的点击事件禁用掉;
var option = {
legend: { //配置legend,这里的data,要对应type为‘bar’的series数据项的‘name’名称,作为图例的说明
data:['预热期','导入期','成长期','成熟期','衰退期'],
selectedMode:false, //图例禁止点击
top:20,
itemWidth:23,
itemHeight:6,
textStyle: {
color: '#707070',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 11,
},
},
grid: {
z:1, //grid作为柱状图的坐标系,其层级要和仪表图层级不同,同时隐藏
show:false,
left: '-30%',
right: '4%',
bottom: '3%',
containLabel: true,
splitLine:{
show: false //隐藏分割线
}, },
xAxis : [ //这里有很多的show,必须都设置成不显示
{
type : 'category',
data : [],
axisLine: {
show: false
},
splitLine:{
show: false
},
splitArea: {
interval: 'auto',
show: false
}
}
],
yAxis : [ //这里有很多的show,必须都设置成不显示
{
type : 'value',
axisLine: {
show: false
},
splitLine:{
show: false
},
}
],
toolbox: {
show: false,
},
series : [
{
name:'刻度盘',
type: 'gauge',
startAngle: 180,
endAngle: 0,
"center": ["50%", "80%"], //整体的位置设置
z: 3,
min: min,
max: max+min,
splitNumber: max,
radius: '110%',
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 10,
color:optionUsedColors
}
},
axisTick: { // 坐标轴小标记
length: 19, // 属性length控制线长
splitNumber: 2,
lineStyle: { // 属性lineStyle控制线条样式
color: '#cdcdcd'
}
},
splitLine: { // 分隔线
length: 20, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
axisLabel: {
textStyle: {
color:'#454A57'
}
},
pointer: {
show: true,
length: '70%',
width: 5,
},
itemStyle:{
normal:{
color:'#454A57',
borderWidth:0
}
},
title: { //仪表盘标题
show: true,
offsetCenter: ['0', '20'],
textStyle: {
color: '#444A56',
fontSize: 12,
fontFamily: 'Microsoft YaHei'
}
},
detail: {
textStyle: {
fontSize: 12,
color: '#707070'
},
offsetCenter: offsetConfig,
formatter: function(){
return '上市时间\n'+time;
}
},
data:[{value: (status/100*max || 0), name: '当前阶段'}]
},
{
name: '灰色内圈',
type: 'gauge',
z:2,
radius: '110%',
startAngle: 180,
endAngle: 0,
"center": ["50%", "80%"], //整体的位置设置
splitNumber: 4,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[1, '#F2F4F8']
],
width: 24,
opacity: 1,
} },
splitLine: { //分隔线样式
show: false,
},
axisLabel: { //刻度标签
show: false,
},
axisTick: { //刻度样式
show: false,
},
detail : {
show:false,
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontWeight: 'bolder',
fontSize:12
}
},
},
{
name:'预热期',
type:'bar',
barWidth: '60%', //不显示,可以随便设置
data:[0],
itemStyle: {
normal: {
color: '#41C468', //这里的图例要注意,颜色设置和仪表盘的颜色对应起来
}
}
},
{
name:'导入期',
type:'bar',
barWidth: '60%',
data:[0],
itemStyle: {
normal: {
color: '#70C1B3',
}
}
},
{
name:'成长期',
type:'bar',
barWidth: '60%',
data:[0],
itemStyle: {
normal: {
color: '#00A1E9',
}
}
},
{
name:'成熟期',
type:'bar',
barWidth: '60%',
data:[0],
itemStyle: {
normal: {
color: '#EE4444',
}
}
},
{
name:'衰退期',
type:'bar',
barWidth: '60%',
data:[0],
itemStyle: {
normal: {
color: '#DCF2C4',
}
}
}
]
}
最终的效果图如下,是不是很简单呢。
echarts仪表盘如何设置图例(legend)的更多相关文章
- gnuplot图例legend设置
//将图例放在右下角 set key bottom //将图例放在中间 set key center //将图例放在左边 set key left //将图例放在指定位置右下角的坐标为(10,0.7) ...
- echarts基础 handleIcon 设置
1.自己引入echarts库 2.找到代码中dataZoom中的handleIcon ,看见对应的是"M0,0 v9.7h5 v-9.7h-5 Z",这是由svg画出来的图形,其中 ...
- echarts相关属性设置(1)折线图篇
option = { tooltip: { trigger: 'axis', // axisPointer: { // type: 'cross', // label: { // background ...
- highcharts图表的图例legend怎么改变显示位置
一.将图例Legend放于图表右侧1.设置chart的marginRight属性值:chart: { marginRight: 120}2.设置legend图例属性值如下 legend: { alig ...
- echarts图表属性设置
原地址:http://blog.csdn.net/she_lover/article/details/51448967theme = { // 全图默认背景 // backgroundColor: ‘ ...
- echarts属性的设置(完整大全)
// 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd ...
- highcharts图表的图例legend
一.将图例Legend放于图表右侧1.设置chart的marginRight属性值:chart: { marginRight: 120}2.设置legend图例属性值如下 legend: { alig ...
- echarts相关属性设置(3)环状图
option = { grid: { left: '3%', top: '0%', // height: 500, right: '30%', containLabel: true, }, legen ...
- echarts属性的设置
// 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd ...
随机推荐
- 用 Python 编写网络爬虫 笔记
Chapter I 简介 为什么要写爬虫? 每个网站都应该提供 API,然而这是不可能的 即使提供了 API,往往也会限速,不如自己找接口 注意已知条件(robots.txt 和 sitemap.xm ...
- MyEclipse(8.5以上的版本) 安装js的开发插件aptana
最近在学习js,想在MyEclipse(MyEclipse 10) 上面安装一个js的开发的插件aptana. MyEclipse 8.5以后的版本的安装的方法: 1.下载aptana_update_ ...
- 【算法系列学习】[kuangbin带你飞]专题十二 基础DP1 C - Monkey and Banana
https://vjudge.net/contest/68966#problem/C [参考]http://blog.csdn.net/qinmusiyan/article/details/79862 ...
- 洛谷【P2393】题解
P2393 [yyy loves Maths II] 原题链接 话说,这题其实方法对了,也蛮水的. 首先方法是一样的,直接扩大忽略精度问题. 其次,我用了c++的函数控制输出小数位数,方法:cout& ...
- scala和java的区别
scala写程序跟说话一样,都是要把你的思想描述出来,但是scala最大的问题是api的符号标记太复杂, 很多都好难看懂,某些语法太过复杂,上手还是有些难度的.java很规范,但是代码太多,写逻辑很 ...
- JAVA 基础之Integer
jdk1.5后增加了自动拆箱和自动装箱特性.java的八种 byte,short,int,long,float,double,char,boolean基本类型和各自对应的包装类型的相互转化. 装箱指的 ...
- 零售业山重水复,全景行柳暗花明——VR全景智慧城市
对今天的中国来说,寻找经济转型的突破口,寻找经济权力的新霸主,零售业应该当仁不让. 零售业正在经历一场脱胎换骨的改造.一方面零售额达到前所未有的水平,另一方面,传统零售商也面临诸多挑战,其中之一,便是 ...
- springboot(三):Spring boot中Redis的使用
spring boot对常用的数据库支持外,对nosql 数据库也进行了封装自动化. redis介绍 Redis是目前业界使用最广泛的内存数据存储.相比memcached,Redis支持更丰富的数据结 ...
- 当一个JavaScripter初次进入PHP的世界,他将看到这样的风景
本文将从以下11点介绍javascript和PHP在基础语法和基本操作上的异同: 1.数据类型的异同 2.常量和变量的定义的不同,字符串连接运算符不同 3.对象的创建方法的不同 4.PHP与JS在变 ...
- 主机设置ss代理,虚拟机共享代理
代理的原理: 关于代理的具体的书面定义你百度谷歌可以知道.这里,我想简单通过一个例子,说明代理的原理: 假如,你在北京,但你女朋友在广州,你有东西要给你的女朋友,但是正好你这几天公司有事,所以你不能去 ...