Echarts ----写属性设置
创始人
2024-04-03 20:33:45
0

目录

一、 柱状图

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 `
使用次数
资源种类${val[0].value}
`}},

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.效果,有些属性也跟柱状图相通的

 三、仪表盘

完整代码,后面的位置可以在这里对比

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.效果

相关内容

热门资讯

银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...
【NI Multisim 14...   目录 序言 一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...
AWSECS:访问外部网络时出... 如果您在AWS ECS中部署了应用程序,并且该应用程序需要访问外部网络,但是无法正常访问,可能是因为...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如,在Dockerfile中添加以下代码:FR...
Android|无法访问或保存... 这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限:此外...
月入8000+的steam搬砖... 大家好,我是阿阳 今天要给大家介绍的是 steam 游戏搬砖项目,目前...
​ToDesk 远程工具安装及... 目录 前言 ToDesk 优势 ToDesk 下载安装 ToDesk 功能展示 文件传输 设备链接 ...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件,主要用于保护内网安全。在日常使用过程中,卸载该软件是一种常...
AWS管理控制台菜单和权限 要在AWS管理控制台中创建菜单和权限,您可以使用AWS Identity and Access Ma...