Echarts——自定义仪表盘图表

我个人本身其实没有从事多久大数据可视化开发这方面，碰到那种没见过的图表都会很慌，然而怕什么来什么…
给大家看下给到我的设计图长什么样子

看到这个图表之后我就去echarts官网上面去找有没有，相必大家也猜到了，那必然是没有的，之后花了很长时间去写这个东西，就想着记录一下，后面工作用到了就不用麻烦了
废话不多说了，直接上代码

option = {color: "#008000",tooltip: {// formatter: "{a} <br/>{b} : {c}%",},series: [// 最外层蓝色{name: "gauge 0",type: "gauge",startAngle: 0,endAngle: -360,radius: "90%",center: ["50%", "50%"],axisLine: {lineStyle: {width: 16,color: [[1, "#27a4c8"]],},},splitLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},anchor: {},pointer: {show: false,},detail: {show: false,},title: {show: false,},data: [{value: 250,name: "km/h",},],},// 底层黑色{name: "gauge 1",type: "gauge",startAngle: 0,endAngle: -360,z: 1,radius: "76%",center: ["50%", "50%"],axisLine: {lineStyle: {width: 140,color: [[1, "#000"]],},},splitLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},anchor: {},pointer: {show: false,},detail: {show: false,},title: {show: false,},},// 中间表盘{name: _this.settlementTable?.position_name || null, // 系列名称type: "gauge", // 系列类型min: 0, // 最小刻度max: 1, // 最大刻度startAngle: -160, // 仪表盘起始角度endAngle: -20, //仪表盘结束角度splitNumber: 10, // 刻度分割段数radius: "77%", // 仪表盘半径center: ["50%", "50%"], //仪表盘位置(圆心坐标)// 仪表盘轴线(轮廓线)相关配置。axisLine: {show: true,// 仪表盘轴线样式lineStyle: {color: [[0.6, "#000"],[0.7, "#feb852"],[1.2, "#ff3912"],],},},// 分隔线样式splitLine: {show: true,distance: -7, // 分隔线与轴线的距离length: 18, // 分隔线线长。支持相对半径的百分比。// 分割线样式lineStyle: {color: "#308138",width: 2,},},// 刻度样式axisTick: {show: true,distance: -9,length: 8,lineStyle: {color: "#308138",width: 2,},splitNumber: 2, //分隔线之间分割的刻度数},// 刻度标签axisLabel: {show: true,distance: 18,fontSize: 11,fontWeight: 600,fontFamily: "Arial",color: "#fff",},// 仪表盘指针pointer: {show: true,// 仪表盘指针icon// icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",icon: "path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z",width: 8,length: "50%", // 指针长度// offsetCenter: [0, '-58%'],itemStyle: {color: "#e3b260",shadowColor: "rgba(255, 0, 0)",shadowBlur: 5,shadowOffsetY: 2,},},//表盘中指针的固定点anchor: {show: true,showAbove: true, //固定点是否显示在指针上面size: 15, // 固定点大小icon: "circle", // 默认固定点icon 也可根据pointer自定义},// 仪表盘标题title: {color: "#fff",fontSize: 14,fontWeight: 800,fontFamily: "Arial",offsetCenter: [0, 35], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比},// 仪表盘详情，用于显示数据detail: {show: false,},data: [{value: _this.settlementTable?.real_data || null,name: _this.settlementTable?.unit,},],},],}

是不是都想看我实现的效果，那就满足你们，哈哈哈哈哈哈哈

Echarts——自定义仪表盘图表相关推荐

汽车配件 html 特效,html5 echarts汽车仪表盘图表动画特效
特效描述:html5 echarts 汽车仪表盘图表动画特效,html5汽车仪表盘,第一次从使用echarts,如何调用js,CSS,测试代码结构 1. 引入JS 2. HTML代码 // 基于准 ...
echarts自定义下载图表
// 全局注册bus const bus = new Vue() Vue.prototype.$bus = bus // 导出图片可以自定义一些样式 export function exportIm ...
java中点击按钮出现echarts图表_echarts 显示下载按钮，echarts 自定义按钮，echarts 添加按钮...
echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...
vue+echarts实现多个仪表盘图表
vue+echarts实现多个仪表盘图表根据echarts官网单个仪表盘修改成多个仪表盘,代码如下: <template><div class="app-containe ...
用Echarts自定义多系列左右双坐标对比的图表，适合展示TGI对比等场景
用Echarts自定义多系列左右双坐标对比的图表,适合展示TGI对比等场景. renderItem = function (params, api) {console.log('----------- ...
echarts自定义图表颜色，柱状图/饼图自定义渐变色
echarts自定义图表颜色,自定义渐变色柱状图: 单色: 原先图表的颜色配置代码: series: {type: "bar",barWidth: "60" ...
在Vue中使用eCharts的地图图表，及生成自定义地图数据（乡镇级）
如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录一.在Vue使用ECharts地图功能二.生成地图数据 1.安装Bigemap 程序 2.生成需要的各乡镇地 ...
Echarts自定义折线图例,增加选中功能
用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应 ...
仪表盘图表仪表图
EasyChart 项目地址:apinIron/EasyChart 简介:仪表盘图表仪表图更多:作者提 Bug 标签: 前言由于项目需要会使用到一些简单的图表,而在 github 上找 ...
html中legend样式,echarts自定义图例legend文字和样式
话不多说,先上效果图. 要完成这个图并不难,主要是下面那个图例比较难,需要定制. 让我们从官方文档找找思路,官方文档关于legend.formatter是这样的:链接在这难点在于: 1.这里的图例文 ...

Echarts——自定义仪表盘图表

Echarts——自定义仪表盘图表

Echarts——自定义仪表盘图表相关推荐

最新文章

热门文章