echarts实现仪表盘

// 植被覆盖echarts3 () {const myChart3 = this.$echarts.init(this.$refs.chart3);var option = {series: [{name: "刻度1",type: "gauge",center: ["50%", "25%"],// radius: "60%",radius: "40%",min: 0, // 最小刻度max: 100, // 最大刻度splitNumber: 4, // 刻度数量startAngle: 230,endAngle: -45,axisLine: {show: false,lineStyle: {width: 1,color: [[1, "rgba(0,0,0,0)"]]}}, // 仪表盘轴线axisLabel: {show: true,color: "#51676f",fontSize: 8,distance: -0,formatter: function (v) {var value = v.toFixed(2);if (value === 0.0) {return "0";} else if (value == 0.25) {return "25%";} else if (value == 0.5) {return "50%";} else if (value == 0.75) {return "75%";} else if (value == 1.0) {return "100%";} else {return "";}},formatter: function (v) {return v;}}, // 刻度标签。axisTick: {show: true,splitNumber: 20,lineStyle: {color: "#233a42",width: 1},length: 5}, // 刻度样式splitLine: {show: true,length: 8,lineStyle: {color: "#586e77"}} // 分隔线样式}, {type: "gauge",// radius: "70%",radius: "50%",center: ["50%", "25%"],splitNumber: 0, // 刻度数量startAngle: 230,endAngle: -45,axisLine: {show: true,lineStyle: {width: 7,color: [[1,new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0.1,color: "#ADFF2F"}, {offset: 0.3,color: "#7FFF00"}, {offset: 0.6,color: "#32CD32"}, {offset: 1,color: "#228B22"}// {   offset: 0.1,   color: "#0bacff" },   {     offset: 0.6,     color:// "#2089cf"   },   {     offset: 1,     color: "#0169ec"   }])]]}},// 分隔线样式。splitLine: {show: false},axisLabel: {show: false},axisTick: {show: false},pointer: {show: true,length: "80%",width: "2%"},title: {show: true,offsetCenter: [0, "70%"], // x, y，单位pxtextStyle: {fontWeight: 100,color: "#d8bb93",fontSize: 26}},// 仪表盘详情，用于显示数据。detail: {show: true,offsetCenter: [0, "30%"],color: "#d8bb93",formatter: function (value) {return value + "%";},textStyle: {fontSize: 30,color: "#fff"}},data: [{name: "林草覆盖率",value: this.echart1Data.vegetationCoverage,}]}, {name: "底下背景圈1",type: "gauge",// radius: "75%",radius: "55%",center: ["50%", "25%"],z: -999,splitNumber: 0, // 刻度数量startAngle: 230,endAngle: -45,axisLine: {show: true,lineStyle: {width: 40,color: [[1, "#09222c"]]}},splitLine: {show: false},axisLabel: {show: false},axisTick: {show: false},pointer: {show: true},title: {show: false},detail: {show: false}}, {name: "刻度2",type: "gauge",// center: ["50%", "380"],  //复制过来的比例center: ["50%", "480"],// radius: "60%",radius: "40%",min: 0, // 最小刻度max: 100, // 最大刻度splitNumber: 4, // 刻度数量startAngle: 230,endAngle: -45,axisLine: {show: true,lineStyle: {width: 1,color: [[1, "rgba(0,0,0,0)"]]}}, // 仪表盘轴线axisLabel: {show: true,color: "#51676f",fontSize: 8,distance: -0,formatter: function (v) {return v;}}, // 刻度标签。axisTick: {show: true,splitNumber: 20,lineStyle: {color: "#233a42",width: 1},length: -3}, // 刻度样式splitLine: {show: true,length: 8,lineStyle: {color: "#5a7079"}} // 分隔线样式}, {type: "gauge",// radius: "70%",radius: "50%",// center: ["50%", "380"],  //复制过来的比例center: ["50%", "480"],splitNumber: 0, // 刻度数量startAngle: 230,endAngle: -45,axisLine: {show: true,lineStyle: {width: 7,color: [[1,new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0.1,color: "#ADFF2F"}, {offset: 0.3,color: "#7FFF00"}, {offset: 0.6,color: "#32CD32"}, {offset: 1,color: "#228B22"}// {   offset: 0.1,   color: "#0bacff" },   {     offset: 0.6,     color:// "#2089cf"   },   {     offset: 1,     color: "#0169ec"   }])]]}},// 分隔线样式。splitLine: {show: false},axisLabel: {show: false},axisTick: {show: false},pointer: {show: true,length: "80%",width: "2%"},title: {show: true,offsetCenter: [6, 100], // x, y，单位pxtextStyle: {fontWeight: 100,color: "#d8bb93",fontSize: 24}},// 仪表盘详情，用于显示数据。detail: {show: true,offsetCenter: [0, "30%"], //展示数据的位置调整color: "#fff",formatter: function (value) {return value + "%";},textStyle: {fontSize: 30}},data: [{name: "林草植被恢复率",value: this.echart1Data.vegetationRecoveryRate}]}, {name: "底下背景圈1",type: "gauge",// radius: "75%",radius: "55%",// center: ["50%", "380"],  //复制过来的比例center: ["50%", "480"],z: -999,splitNumber: 0, // 刻度数量startAngle: 230,endAngle: -45,axisLine: {show: true,lineStyle: {width: 40,color: [[1, "#09222c"]]}},splitLine: {show: false},axisLabel: {show: false},axisTick: {show: false},pointer: {show: true},title: {show: false},detail: {show: false}}]};myChart3.setOption(option);},

第二中仪表盘

 echarts13 () {const myChart13 = this.$echarts.init(this.$refs.chart13);var colors = ["#e00005", "#e6a900", "#00c05a"];var fontColor = "#0089fa";// var data = this.echart1Data console.log(this.echart13Data) var data = [70,// 2];var fontSize = 6;var percent = this.echart13Data// console.log(percent,typeof percent)var option = {series: [{type: "gauge",name: "外层辅助",radius: "86%",// pointer: {   show: false },detail: {show: false},data: [{// value: 70,}],title: {show: false,offsetCenter: [-60, "90%"],textStyle: {color: fontColor}},axisLine: {show: true,lineStyle: {color: [[1, "#0a80d5"]],width: 2,opacity: 1}},axisTick: {show: false},splitLine: {show: false,length: 25,lineStyle: {color: "#051932",width: 0,type: "solid"}},axisLabel: {show: false}}, {name: "最内层线",type: "gauge",radius: "30%",center: ["50%", "50%"],startAngle: 0,endAngle: 359,axisLine: {show: false,lineStyle: {opacity: 0}},splitLine: {show: false,lineStyle: {opacity: 0}},axisLabel: {show: false},axisTick: {length: 0.5,lineStyle: {color: fontColor,width: 2,type: "solid"}},detail: {show: false},data: []}, {name: "内层数据刻度",type: "gauge",radius: "79%",min: 0,max: 100,center: ["50%", "50%"],axisLine: {lineStyle: {width: 15,color: [[0.1, colors[0]],[0.3,new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: colors[0]}, {offset: 0.8,color: colors[1]}])],[0.7, colors[1]],[0.9,new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: colors[2]}, {offset: 0.6,color: colors[1]}])],[1, colors[2]]]}},splitLine: {length: 10,lineStyle: {width: 1,color: "#ffffff"}},axisTick: {lineStyle: {width: 1,color: "#ffffff"}},axisLabel: {color: fontColor,distance: 10,fontSize: fontSize},detail: {show: true,offsetCenter: ["0", "87%"],color: "#fff",formatter: function (value) {return value.toFixed(2) + "%";},fontSize: 36},itemStyle: {normal: {color: "rgb(0,191,255)"}},data: [{value: percent// value: this.echart1Data}],silent: true,title: {offsetCenter: [0, "75%"], // 设置在线率位置color: fontColor}}]};myChart13.setOption(option);},

第3中仪表盘样式

 echarts5_1 () {const myChart5 = this.$echarts.init(this.$refs.chart5_1);var option = {title: {show: true,text: "供电排放强度(kg/MWh)",top: 41,left: 27,textStyle: {color: "#d8bb93",fontSize: 29,fontWeight: 400}},tooltip: {//  formatter: "{b}{c}"},series: [// {   tooltip: {     show: false   },   name: "中心圆点",   type: "pie",// hoverAnimation: false,   legendHoverLink: false,   center: ["50%", "90%"],// radius: ["0%", "7%"],   z: 5,   label: {     normal: {       show: false,// position: "center"     },     emphasis: {       show: false     }   },// labelLine: {     normal: {       show: false     }   },   data: [     {// value: 100,       itemStyle: {         normal: {           color: "#072B79"// },         emphasis: {           color: "#072B79"         }       }     }   ]// }, {   tooltip: {     show: false   },   name: "中心小圆形",   type: "pie",// hoverAnimation: false,   legendHoverLink: false,   center: ["50%", "90%"],// radius: ["6%", "8%"],   z: 5,   label: {     normal: {       show: false,// position: "center"     },     emphasis: {       show: false     }   },// labelLine: {     normal: {       show: false     }   },   data: [     {// value: 100,       itemStyle: {         normal: {           color: "#24D8E7"// },         emphasis: {           color: "#24D8E7"         }       }     }   ]// },{name: "内圈刻度",type: "gauge",radius: "97%",min: 0,max: 1,center: ["50%", "90%"],data: [{// value: 895,value: this.echarts5_1Data,name: ""}],splitNumber: 12, // 刻度数量startAngle: 180,endAngle: 0,z: 5,axisLine: {show: true,lineStyle: {width: 5,color: [[0.12, "#E71A6D"],[0.35, "#F88168"],[0.63, "#FBF76B"],[0.8, "#7AD4DF"],[1, "#70C27E"]]}}, // 仪表盘轴线axisLabel: {show: false,color: "#fff",fontSize: 19,distance: -30,formatter: function (params) {var value = params.toFixed(2);if (value == 0.0) {return "0";} else if (value == 0.25) {return "25%";} else if (value == 0.5) {return "50%";} else if (value == 0.75) {return "75%";} else if (value == 1.0) {return "100%";} else {return "";}}}, // 刻度标签。axisTick: {splitNumber: 6,show: true,lineStyle: {color: "auto",width: 0.6},length: 17  //短刻度长度}, // 刻度样式splitLine: {show: true,length: 21,  //长刻度lineStyle: {color: "auto",width: 1}}, // 分隔线样式itemStyle: {normal: {color: "#24D8E7" // 指针颜色}},// pointer: {   width: 2,   length: "80%" },pointer: {show: false},detail: {show: true,// formatter: function (params) {     return (params*100).toFixed(0) + '%' },// fontSize: 40,  //设置仪表盘中间文字大小color: "#fff",offsetCenter: ["0%", "-20%"]},title: {offsetCenter: ["0", "-35%"],fontSize: 24,color: "#d8bb93",show: true}}]};myChart5.setOption(option);},

echarts实现仪表盘相关推荐

Echarts 多仪表盘（汽车仪表盘，动态刷新）
Echarts 多仪表盘 echarts 作业三一.任务需求实现一个汽车仪表盘,需包含四个仪表盘. 二.使用步骤代码如下(示例): <!DOCTYPE html> <html ...
汽车配件 html 特效,html5 echarts汽车仪表盘图表动画特效
特效描述:html5 echarts 汽车仪表盘图表动画特效,html5汽车仪表盘,第一次从使用echarts,如何调用js,CSS,测试代码结构 1. 引入JS 2. HTML代码 // 基于准 ...
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关于仪表盘
闲来无事,制作不一样的图标一发,领导让把仪表盘做成百分条,我TM也是醉了,大体样式如下图:(图标是没2秒变化的) <div id="main" style="wid ...
Echarts分段仪表盘
一.代码简介本次主要是在Vue web项目中,利用Echarts实现一个多段的仪表盘. 二.功能预览三.示例代码 <template><div id="echartsG ...
echarts 使用仪表盘图展示百分比
echarts案例: 仪表盘图展示百分比样式在实际开发工作中,很多时候需要用到数据可视化,echarts是比较常用的数据可视化工具,下面分享一个echarts仪表盘图展示百分比样式的案例.效果图如下 ...
echarts初始化仪表盘（gauge）
注意:series的属性可以进一次抽离,例子中是没有抽离的,所以重复属性较多完整代码 <!DOCTYPE html> <html lang="en">&l ...
vue中使用echarts绘制仪表盘
效果图目录一.安装echarts 1.控制台使用命令进行安装 2.在package.json中配置echarts 3.在main.js中引用二.vue中使用echarts 1.首先设置一个放置图 ...

echarts实现仪表盘

第二中仪表盘

第3中仪表盘样式

echarts实现仪表盘相关推荐

最新文章

热门文章