Echarts 柱状图、折线图和仪表盘的一写属性设置
目录
一、 柱状图
1.背景线设置为虚线，lineStyleL里面的type属性为dashed，默认是实线。
2.鼠标放在柱子上的阴影效果，如果用shadow无法设置宽度
3.鼠标放上的tip自定义
4.x轴和y轴顶端的名字，分别在x和y设置nane即可
5.单个柱子设置颜色
6.柱子的宽度和颜色分别是barWidth和itemStyle下的normal下的color
7.效果图
二、折线图
1.折线的颜色和小圆点的颜色，分别是lineStyle下的color和itemStyle下normal下的color，也可以像第二种那样设置，showSymbol: false 为鼠标没放上去时不显示小圆点。如果要平滑的话设置smooth: true。
2.设置两个不同的y坐标，最小值min，最大值max。
3.让整个echarts图铺满div容器
4.效果，有些属性也跟柱状图相通的
三、仪表盘
1.进度条的颜色大小
2.仪表盘的刻度
3.背景环的大小
4.指针
5.刻度的颜色大小和长度
6.数值的颜色大小，距离刻度的距离
7.标题的颜色和位置
8.具体值和单位的颜色大小
9.数值和标题
10.效果
一、 柱状图
1.背景线设置为虚线，lineStyleL里面的type属性为dashed，默认是实线。
yAxis: {type: 'value',name: "数量(K)",splitLine: {show: true,lineStyle: {type: 'dashed'}}
},2.鼠标放在柱子上的阴影效果，如果用shadow无法设置宽度
'line'直线指示器'shadow'阴影指示器'none'无指示器'cross'十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'line',lineStyle: {color: {type: 'line',x: 0,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0, color: 'rgba(238, 238, 238, 0.3 )' // 100% 处的颜色}, {offset: 1, color: 'rgba(238, 238, 238, 0.1)' // 0% 处的颜色 #000613','#00334f', '#77f0ff'}],},type: 'solid',width: 20},},
}3.鼠标放上的tip自定义
tooltip: {trigger: 'axis',
formatter: (val) => {return `<div style="padding:5px;"><div style="margin-bottom:10px;">使用次数</div><div style="width:6px;height:6px;background:#007DFF;border-radius:50%;display:inline-block;"></div> <span style="color:#949494;margin:0 5px">资源种类</span><span style="color:#000">${val[0].value}</span></div>`}},4.x轴和y轴顶端的名字，分别在x和y设置nane即可
xAxis: [{type: 'category',name: "月",data: ['01', '02', '03', '04', '05', '07', '07', '08', '09', '10', '11', '12']},],yAxis: {type: 'value',name: "数量(K)",splitLine: {show: true,lineStyle: {type: 'dashed'}}},5.单个柱子设置颜色
series: [{data: [120,{value: 200,itemStyle: {color: '#a90000'}},150,80,70,110,130],type: 'bar'}]或者
series: [{data: [],type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(111, 162, 135, 0.2)'},itemStyle: {normal: {//这里是颜色color: function(params) {//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色var colorList = ['#00A3E0','#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA','#749f83', '#ca8622'];return colorList[params.dataIndex]}}}}]
6.柱子的宽度和颜色分别是barWidth和itemStyle下的normal下的color
series: [{name: "资源种类",barWidth: 12,data: [20, 34, 30, 22, 45, 67, 44, 65, 78, 65, 66, 99],itemStyle: {normal: {color: "#025CEA"}},type: 'bar'},]7.效果图
二、折线图
1.折线的颜色和小圆点的颜色，分别是lineStyle下的color和itemStyle下normal下的color，也可以像第二种那样设置，showSymbol: false 为鼠标没放上去时不显示小圆点。如果要平滑的话设置smooth: true。
series: [{data: [20, 34, 30, 22, 45, 67, 44, 65, 78, 65, 66, 99],type: 'line',name: "使用率",lineStyle: {color: "#025CEA"},itemStyle: {normal: {color: "#025CEA",}},showSymbol: false},{data: [19, 45, 23, 56, 76, 87, 37, 55, 79, 32, 45, 54],type: 'line',name: "爽约率",smooth: true,itemStyle: {normal: {color: "#28AA91",lineStyle: {color: "#28AA91"},}},showSymbol: false},]2.设置两个不同的y坐标，最小值min，最大值max。
注意：如果想要第二个数据以右边刻度为准，需要在第二个里面加上yAxisIndex: 1,
yAxis: [{type: 'value',name: "人数",splitLine: {show: true,lineStyle: {type: 'dashed'}}},{type: 'value',name: "百分比",yAxisIndex: 1, //-------------------------->(添加这个属性即可!!!!)min: 0,max: 100,splitLine: {show: true,lineStyle: {type: 'dashed'}}}],3.让整个echarts图铺满div容器
注意：如果想要横纵坐标都显示要加 containLabel: true
const option = {// backgroundColor: '#2c343c',grid: {top: "10px",left: "0px",right: "0px",bottom: "50px",containLabel: true},
}4.效果，有些属性也跟柱状图相通的
5.折线图阴影
areaStyle: {//区域填充样式normal: {//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。color: {x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(235, 139, 24, 0.31)",},{offset: 1,color: "rgba(255, 255, 255, 0)",},],globalCoord: false},}},
三、仪表盘
完整代码，后面的位置可以在这里对比
series: [{min: 0,max: 100,splitNumber: 4, //仪表盘分割段数type: 'gauge',progress: {show: true,width: 12,itemStyle: {color: "#025CEA"}},axisLine: {lineStyle: {width: 12,}},axisTick: {show: false},pointer: {show: false},splitLine: {// show:false,length: 10,lineStyle: {width: 2,color: '#949494'}},axisLabel: {distance: 25,color: '#949494',fontSize: 16},title: {offsetCenter: [0, '20%'],color: "#949494"},detail: {valueAnimation: true,formatter: (value) => {return '{value|' + value.toFixed(0) + '}{unit|%}';},offsetCenter: [0, '0%'],rich: {value: {fontSize: 50,fontWeight: 'bolder',color: '#000'},unit: {fontSize: 20,color: '#949494',padding: [0, 0, -20, 10]}}},data: [{value: 80,name: '出勤率'}]}]1.进度条的颜色大小
progress: {show: true,width: 12,itemStyle: {color: "#025CEA"}},2.仪表盘的刻度
min: 0,max: 100,splitNumber: 4, //仪表盘分割段数3.背景环的大小
axisLine: {lineStyle: {width: 12,}
}4.指针
pointer: {show: false},5.刻度的颜色大小和长度
splitLine: {// show:false,length: 10,lineStyle: {width: 2,color: '#949494'}},6.数值的颜色大小，距离刻度的距离
axisLabel: {distance: 25,color: '#949494',fontSize: 16},7.标题的颜色和位置
title: {offsetCenter: [0, '20%'],color: "#949494"},8.具体值和单位的颜色大小
detail: {valueAnimation: true,formatter: (value) => {return '{value|' + value.toFixed(0) + '}{unit|%}';},offsetCenter: [0, '0%'],rich: {value: {fontSize: 50,fontWeight: 'bolder',color: '#000'},unit: {fontSize: 20,color: '#949494',padding: [0, 0, -20, 10]}}},9.数值和标题
data: [{value: 80,name: '出勤率'}]10.效果
Echarts 柱状图、折线图和仪表盘的一写属性设置相关推荐
- 从后端数据库获取数据并传值到前端vue项目的echarts柱状图/折线图/饼图里
不同图表的数据获取有一定的区别 在这些区别上花了不少功夫试验,把最后成功的方法做个记录,如果有类似项目要做的话,也可看看当个参考. 后端 后端都大同小异,方法上没有区别,在这里以柱状图为例. sql: ...
- echarts柱状图+折线图实例
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8" ...
- echarts中折线图、柱状图之间的转换
echarts中折线图.柱形图.数据视图的转换需要toolbox里面的内容(也就是加粗的部分) // 基于准备好的dom,初始化echarts实例 var day = echarts.init ...
- echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
- Echarts实现堆叠柱状图+折线图
Echarts实现堆叠柱状图+折线图,以便后续使用时复制 //堆疊Bar圖+折線圖 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: { ...
- Echarts实现折线图+柱状图+折线图填充
用Echarts练习实现折线图+柱状图+折线图填充,以便后续使用时可直接复制 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {tri ...
- Echarts 双侧 双表头 柱状图 折线图
Echarts 双侧 双表头 柱状图 折线图 带箭头 区分颜色 成品图片(如需折线图自行更改) 废话不多say 上代码
- 手把手教你用ECharts画折线图
导读:折线图是一种基础图表,适合表示数据的变化趋势,常用于时间序列数据的表示. 作者:王大伟 来源:大数据DT(ID:hzdashuju) 在正式学习之前,先来了解一个ECharts官网提供的很好用的 ...
- 折线图_手把手教你用ECharts画折线图
导读:折线图是一种基础图表,适合表示数据的变化趋势,常用于时间序列数据的表示. 作者:王大伟 来源:华章科技 在正式学习之前,先来了解一个ECharts官网提供的很好用的功能.该功能可以实时显示代码的 ...
最新文章
- 工具库 --- Validator (JS正则)
- .net使用memcached
- lookout筛选相同信息_信息流广告4大行业案例总结分析（不会操作那就抄吧，建议收藏）...
- EditText显示明文与密码
- thinkphp长连接MySQL_ThinkPHP3.2.3---mysql+ajax实现长连接，实时监测数据库数据是否更新...
- IM开发基础知识补课(三)：快速理解服务端数据库读写分离原理及实践建议
- [HNOI 2011]卡农
- lambda 序列化_Lambda，会序列化吗？
- 创建一个方便设计的自定义栅格布局
- oxm java_使用JAXB2.0实现OXM
- Spring : Spring Aop 获取增强(通知)
- python mobilenetssd android_MobileNetV2-SSDLite运行
- ios UISegmentedControl的使用简介
- android 百度 tts,百度语音TTS. android 启动时闪退
- 程序员累了怎么办-兄弟连IT教育
- 图像处理之灰色图转化为RGB图像
- notes系统服务器地址,在Notes客户端和Domino服务器上，服务器地址的缓存（Cache）存放在哪里...
- oracle用户 expire,Oracle用户expired
- Java——类与对象
- 如何选择字体(font-family)