echarts初始化仪表盘（gauge）

注意：series的属性可以进一次抽离，例子中是没有抽离的，所以重复属性较多

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>#main {width: 600px;height: 400px;background-color: #fff;margin: 0 auto;}</style>
</head><body><div id="main"></div><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.min.js"></script><script>let data = {actual: 1000,expected: 500,target: 300}initGaugeChart()function initGaugeChart() {let myChart = echarts.init(document.getElementById('main'))let option = {title: {text: '我是一个title',left: 'center',bottom: 35},legend: {icon: 'roundRect',data: ['实际业绩', '预期业绩', '目标业绩'],bottom: 0,itemWidth: 19,itemHeight: 7,textStyle: {color: '#707070',fontSize: 12}},series: [{name: '实际业绩',type: 'gauge',detail: {formatter: '金额：万元',show: true,fontSize: 10,color: 'rgba(148, 148, 148, 1)',offsetCenter: ['0', '45%']},data: [{value: data.actual}],// 注意：仪表盘的最大值应该是取数据 data中最大的那个值// 不然可能会出现层级显示问题// 同时注意：max是又一个最大值的max: 6000,itemStyle: {color: new echarts.graphic.LinearGradient(0,0,1,0,[{offset: 0,color: '#61BCE2'},{offset: 0.8,color: '#3F7AF3'}],false)},endAngle: 0,startAngle: 180,axisLabel: {show: true,distance: -50,color: '#676767',fontSize: '12px'/*使用formatter 函数修改max显示的最大值formatter: (e) => {return e >= 50000 ? Math.ceil(e / 10000) + '万' : e}*/},axisTick: {show: false},splitLine: {show: false},progress: {show: true,roundCap: true,width: 15,itemStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: '#61BCE2'},{offset: 0.8,color: '#3F7AF3'}],false)}},axisLine: {show: true,roundCap: true,lineStyle: {width: 15}},pointer: {show: true,width: 3,length: 35,itemStyle: {color: '#3F7AF3'}},anchor: {show: true,showAbove: true,size: 18,itemStyle: {color: '#9C6BFF'}}},{name: '预期业绩',type: 'gauge',detail: {formatter: '金额：万元',show: true,fontSize: 10,color: 'rgba(148, 148, 148, 1)',offsetCenter: ['0', '45%']},data: [{value: data.expected}],max: 6000,itemStyle: {color: new echarts.graphic.LinearGradient(0,0,1,0,[{offset: 0,color: '#986EEB'},{offset: 0.8,color: '#7256ED'}],false)},endAngle: 0,startAngle: 180,axisLabel: {show: true,distance: -50,color: '#676767',fontSize: '12px'},axisTick: {show: false},splitLine: {show: false},progress: {show: true,roundCap: true,width: 15,itemStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: '#986EEB'},{offset: 0.8,color: '#7256ED'}],false)}},pointer: {show: true,width: 3,length: 65,itemStyle: {color: '#7256ED'}},axisLine: {show: true,roundCap: true,lineStyle: {width: 15}}},{name: '目标业绩',type: 'gauge',data: [{value: data.target}],max: 6000,itemStyle: {color: new echarts.graphic.LinearGradient(0,0,1,0,[{offset: 0,color: '#F563AA'},{offset: 0.8,color: '#F1357A'}],false)},detail: {formatter: '金额：万元',show: true,fontSize: 10,color: 'rgba(148, 148, 148, 1)',offsetCenter: ['0', '45%']},endAngle: 0,startAngle: 180,axisLabel: {show: true,distance: -50,color: '#676767',fontSize: '12px'},axisTick: {show: false},splitLine: {show: false},pointer: {show: true,width: 3,length: 34,itemStyle: {color: '#F23A7F'}},progress: {show: true,roundCap: true,width: 15,itemStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: '#F563AA'},{offset: 0.8,color: '#F1357A'}],false)}}}]}option && myChart.setOption(option)}</script>
</body></html>

echarts初始化仪表盘（gauge）相关推荐

汽车配件 html 特效,html5 echarts汽车仪表盘图表动画特效
特效描述:html5 echarts 汽车仪表盘图表动画特效,html5汽车仪表盘,第一次从使用echarts,如何调用js,CSS,测试代码结构 1. 引入JS 2. HTML代码 // 基于准 ...
Echarts 多仪表盘（汽车仪表盘，动态刷新）
Echarts 多仪表盘 echarts 作业三一.任务需求实现一个汽车仪表盘,需包含四个仪表盘. 二.使用步骤代码如下(示例): <!DOCTYPE html> <html ...
echarts初始化中国地图（Map）
echarts初始化中国地图 vue 中可以直接使用,修改文件地址即可更多echarts例子 1.http://www.ppchart.com/#/ 2.https://www.isqqw.com/ ...
Echarts关于仪表盘
闲来无事,制作不一样的图标一发,领导让把仪表盘做成百分条,我TM也是醉了,大体样式如下图:(图标是没2秒变化的) <div id="main" style="wid ...
Echarts分段仪表盘
一.代码简介本次主要是在Vue web项目中,利用Echarts实现一个多段的仪表盘. 二.功能预览三.示例代码 <template><div id="echartsG ...
echarts 设置仪表盘数字的位置_一个 ECharts 做的猜数小游戏
大概 1 年多之前,一位老同学找到我,问能不能帮他做一个非常简单的猜数字游戏,需求是这样的: 在 1 到 100 的整数里,随机选一个数字,让小朋友们猜: 如果猜错了,告知小朋友猜大了还是猜小了: 如 ...
vue+echarts实现仪表盘
API文档:请点击仪表盘实例地址:请点击目标样式: 实现代码: //html部分 <div id="dashboardHumidity" style="widt ...
echarts扇形仪表盘
效果展示 options代码 {series: [{type: "gauge",max: 20,splitNumber: 16,axisLine: {lineStyle: {wid ...
echarts 节点（gauge）图的使用
1.导入 import * as echarts from "echarts"; 使用 var myChart = echarts.init(document.getElement ...

echarts初始化仪表盘（gauge）

完整代码

echarts初始化仪表盘（gauge）相关推荐

最新文章

热门文章