Echarts-仪表盘

1 绘制单仪表盘

<html><head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="js/echarts.js"></script></head><body><!---为ECharts准备一个具备大小（宽高）的DOM---><div id="main" style="width: 800px; height: 600px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var color1 = [[0.2, "rgba(255,0,0,1)"], [0.8, "rgba(0,255,255,1)"], [1, "rgba(0,255,0,1)"]];var data1 = [{name: "完成率(%)",value: 50,}];var option = {  //指定图表的配置项和数据backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1tooltip: {  //配置提示框组件show: true,formatter: "{b}：{c}%",backgroundColor: "rgba(255,0,0,0.8)",  //设置提示框浮层的背景颜色borderColor: "#333",  //设置提示框浮层的边框颜色borderWidth: 0,  //设置提示框浮层的边框宽padding: 5,  //设置提示框浮层内边距，单位px，默认各方向内边距为5textStyle: {  //设置提示框浮层的文本样式//color,fontStyle,fontWeight,fontFamily,fontSize,lineHeight},},title: {  //配置标题组件text: '项目实际完成率(%)',x: 'center', y: 25,show: true,  //设置是否显示标题，默认true//设置相对于仪表盘中心的偏移位置//数组第一项是水平方向的偏移，第二项是垂直方向的偏移offsetCenter: [50, "20%"],textStyle: {fontFamily: "黑体",  //设置字体名称，默认宋体color: "blue",  //设置字体颜色，默认#333fontSize: 20,  //设置字体大小，默认15}},series: [{name: "单仪表盘示例",  //设置系列名称，用于tooltip的显示，legend的图例筛选type: "gauge",  //设置系列类型radius: "80%",  //设置参数：number，string，仪表盘半径，默认75% center: ["50%", "55%"],  //设置仪表盘位置(圆心坐标)startAngle: 225,  //设置仪表盘起始角度，默认225endAngle: -45,  //设置仪表盘结束角度，默认-45clockwise: true,  //设置仪表盘刻度是否是顺时针增长，默认truemin: 0,  //设置最小的数据值，默认0，映射到minAnglemax: 100,  //设置最大的数据值，默认100，映射到maxAnglesplitNumber: 10,  //设置仪表盘刻度的分割段数，默认10axisLine: {  //设置仪表盘轴线(轮廓线)相关配置show: true,  //设置是否显示仪表盘轴线(轮廓线)，默认truelineStyle: {  //设置仪表盘轴线样式color: color1,  //设置仪表盘的轴线可以被分成不同颜色的多段opacity: 1,  //设置图形透明度，支持从0到1的数字，为0时不绘制该图形width: 30,  //设置轴线宽度，默认30shadowBlur: 20,  //设置(发光效果)图形阴影的模糊大小shadowColor: "#fff",  //设置阴影颜色，支持的格式同color}},splitLine: {  //设置分隔线样式show: true,  //设置是否显示分隔线，默认truelength: 30,  //设置分隔线线长，支持相对半径的百分比，默认30lineStyle: {  //设置分隔线样式color: "#eee",  //设置线的颜色，默认#eee//设置图形透明度，支持从0到1的数字，为0时不绘制该图形opacity: 1,width: 2,  //设置线度，默认2type: "solid",  //设置线的类型，默认solid，此外还有dashed，dottedshadowBlur: 10,  //设置(发光效果)图形阴影的模糊大小shadowColor: "#fff",  //设置阴影颜色，支持的格式同color}},axisTick: {  //设置刻度(线)样式show: true,  //设置是否显示刻度(线)，默认truesplitNumber: 5,  //设置分隔线之间分割的刻度数，默认5length: 8,  //设置刻度线长.支持相对半径的百分比，默认8lineStyle: {  //设置刻度线样式color: "#eee",  //设置线的颜色，默认#eee//设置图形透明度.支持从0到1的数字，为0时不绘制该图形opacity: 1,width: 1,  //设置线度，默认 1type: "solid",  //设置线的类型，默认solid，此外还有dashed，dottedshadowBlur: 10,  //设置(发光效果)图形阴影的模糊大小shadowColor: "#fff",  //设置阴影颜色，支持的格式同color},},axisLabel: {  //设置刻度标签show: true,  //设置是否显示标签，默认truedistance: 25,  //设置标签与刻度线的距离，默认5color: "blue",  //设置文字的颜色fontSize: 32,  //设置文字的字体大小，默认5//设置刻度标签的内容格式器，支持字符串模板和回调函数两种形式formatter: "{value}",},pointer: {  //设置仪表盘指针show: true,  //设置是否显示指针，默认true//设置指针长度,可以是绝对值，也可是相对于半径的百分比，默认80%length: "70%",width: 9,  //设置指针宽度，默认8},itemStyle: {  //设置仪表盘指针样式color: "auto",  //设置指针颜色，默认(auto)取数值所在的区间的颜色opacity: 1,  //设置图形透明度，支持从0到1的数字，为0时不绘制该图形borderWidth: 0,  //设置描边线宽,默认0，为0时无描边//设置柱条的描边类型,默认为实线，支持'solid'，'dashed'，'dotted'borderType: "solid",borderColor: "#000",  //设置图形的描边颜色，默认"#000"，不支持回调函数shadowBlur: 10,  //设置(发光效果)图形阴影的模糊大小shadowColor: "#fff",  //设置阴影颜色，支持的格式同color},emphasis: {  //设置高亮的仪表盘指针样式itemStyle: {//高亮和正常,两者具有同样的配置项，只是在不同状态下配置项的值不同}},detail: {  //设置仪表盘详情，用于显示数据show: true,  //设置是否显示详情，默认trueoffsetCenter: [0, "50%"],  //设置相对于仪表盘中心的偏移位置color: "auto",  //设置文字的颜色，默认autofontSize: 30,  //设置文字的字体大小，默认15formatter: "{value}%",  //格式化函数或者字符串},data: data1}]};setInterval(function () {option.series[0].data[0].value = (Math.random() * 100).toFixed(2);myChart.setOption(option, true);  //使用指定的配置项和数据显示图表}, 2000);  //每2秒重新渲染一次，以实现动态效果</script>
</body></html>

2绘制多层仪表盘

<template><div class="chart_4" id="main" ></div>
</template>
<script>import * as echarts from "echarts";export default {data() {return {}},mounted() {this.chart_write(); },methods: {chart_write() {let myChart = echarts.init(document.getElementById("main"));let option =  {series: [// 外部 仪表盘{// 图表类型type: "gauge",// 刻度最小值min: 350,// 刻度最大值max: 950,// 仪表盘的大小radius: '80%',// 设置等份（多少大的刻度）splitNumber: 12,axisLine: {// 控制线条样式lineStyle: {type: 'dashed',color: [[1, '#4565A8']],width: 3}},// 控制小刻度axisTick: {show: false},// 控制大刻度splitLine: {// 距离线的位置distance: -4,// 长度length: 5,// 刻度线的样式lineStyle: {color: '#4565A8'}},// 刻度样式设置axisLabel: {// 位置distance: -60,// 颜色color: '#4565A8',// 字体大小fontSize: 25},// 指针设置pointer: {// 指针图标icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",// 指针长度length: "12%",// 指针宽度width: 20,// 指针位置offsetCenter: [0, "-60%"],// 指针颜色itemStyle: {color: "auto"}},// '评分结果'调整title: {// 位置offsetCenter: [0, "90%"],// 字体大小fontSize: 50,// 字体颜色color: "#919cb0"},// data 数据显示 调整detail: {// 字体大小fontSize: 60,// 位置offsetCenter: [0, "0%"],// 显示的内容formatter: function(value) {return Math.round(value*1)  + "分";},// 颜色color: '#fff'},// 展示结果data: [{// detail 展示内容结果值value: 700,// title 展示内容name: "评分结果",}]},// 内部 仪表盘{type: "gauge",splitNumber: 8,axisLine: {lineStyle: {width: 6,color: [[0.25, "#FF6E76"],[0.5, "#FDDD60"],[0.75, "#58D9F9"],[1, "#7CFFB2"]]}},axisTick: {length: 12,lineStyle: {color: "auto",width: 2}},splitLine: {length: 20,lineStyle: {color: "auto",width: 5}},axisLabel: {color: "#fff",fontSize: 35,distance: 30,formatter: function(value) {console.log(value,"00000");if (value === 87.5) {return "优";} else if (value === 62.5) {return "良";} else if (value === 37.5) {return "中";} else if (value === 12.5) {return "差";}return "";}},}]};myChart.setOption(option);},}}
</script>

3 绘制多仪表盘

<html><head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="js/echarts.js"></script></head><body><!---为ECharts准备一个具备大小（宽高）的DOM---><div id="main" style="width: 800px; height: 600px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var option = {  //指定图表的配置项和数据backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1title: {  //配置标题组件text: '多仪表盘实例 (共四个仪表盘)',x: 'center', y: 100,show: true,  //设置是否显示标题，默认trueoffsetCenter: [50, "20%"],  //设置相对于仪表盘中心的偏移textStyle: {fontFamily: "黑体",  //设置字体名称，默认宋体color: "blue",  //设置字体颜色，默认#333fontSize: 20,  //设置字体大小，默认15}},tooltip: { formatter: "{a} <br/>{c} {b}" },  //配置提示框组件series: [  //配置数据系列，共有4个仪表盘{   //设置数据系列之1：速度name: '速度', type: 'gauge', z: 3,min: 0,  //设置速度仪表盘的最小值max: 220,  //设置速度仪表盘的最大值splitNumber: 22,  //设置速度仪表盘的分隔数目为22radius: '50%',  //设置速度仪表盘的大小axisLine: { lineStyle: { width: 10 } },axisTick: {  //设置坐标轴小标记length: 15,  //设置属性length控制线长splitNumber: 5,  //设置坐标轴小标记的分隔数目为5lineStyle: {  //设置属性lineStyle控制线条样式color: 'auto'}},splitLine: { length: 20, lineStyle: { color: 'auto' } },title: { textStyle: { fontWeight: 'bolder', fontSize: 20, fontStyle: 'italic' } },detail: { textStyle: { fontWeight: 'bolder' } },data: [{ value: 40, name: '车速(km/h)' }]},{   //设置数据系列之2：转速name: '转速', type: 'gauge',center: ['20%', '55%'],  //设置转速仪表盘中心点的位置，默认全局居中radius: '35%',  //设置转速油表仪表盘的大小min: 0,  //设置转速仪表盘的最小值max: 7,  //设置转速仪表盘的最大值endAngle: 45,splitNumber: 7,  //设置转速仪表盘的分隔数目为7axisLine: { lineStyle: { width: 8 } },  //设置属性lineStyle控制线条样式axisTick: {  //设置坐标轴小标记length: 12,  //设置属性length控制线长splitNumber: 5,  //设置坐标轴小标记的分隔数目为5lineStyle: {  //设置属性lineStyle控制线条样式color: 'auto'}},splitLine: {  //设置分隔线length: 20,  //设置属性length控制线长lineStyle: {  //设置属性lineStyle（详见lineStyle）控制线条样式color: 'auto'}},pointer: { width: 5 },title: { offsetCenter: [0, '-30%'], },detail: { textStyle: { fontWeight: 'bolder' } },data: [{ value: 1.5, name: '转速(x1000 r/min)' }]},{   //设置数据系列之3：油表name: '油表', type: 'gauge',center: ['77%', '50%'],  //设置油表仪表盘中心点的位置，默认全局居中radius: '25%',  //设置油表仪表盘的大小min: 0,  //设置油表仪表盘的最小值max: 2,  //设置油表仪表盘的最小值startAngle: 135, endAngle: 45,splitNumber: 2,  //设置油表的分隔数目为2axisLine: { lineStyle: { width: 8 } },  //设置属性lineStyle控制线条样式axisTick: {  //设置坐标轴小标记splitNumber: 5,  //设置小标记分隔数目为5length: 10,  //设置属性length控制线长lineStyle: {  //设置属性lineStyle控制线条样式color: 'auto'}},axisLabel: {formatter: function (v) {switch (v + '') {case '0': return 'E';case '1': return '油表';case '2': return 'F';}}},splitLine: {  //设置分隔线length: 15,  //设置属性length控制线长lineStyle: {  //设置属性lineStyle（详见lineStyle）控制线条样式color: 'auto'}},pointer: { width: 4 },  //设置油表的指针宽度为4title: { show: false },detail: { show: false },data: [{ value: 0.5, name: 'gas' }]},{   //设置数据系列之4：水表name: '水表', type: 'gauge',center: ['77%', '50%'],  //设置水表仪表盘中心点的位置，默认全局居中radius: '25%',  //设置水表仪表盘的大小min: 0,  //设置水表的最小值max: 2,  //设置水表的最大值startAngle: 315, endAngle: 225,splitNumber: 2,  //设置分隔数目axisLine: {  //设置坐标轴线lineStyle: {  //设置属性lineStyle控制线条样式width: 8  //设置线条宽度}},axisTick: { show: false },  //设置不显示坐标轴小标记axisLabel: {formatter: function (v) {switch (v + '') {case '0': return 'H';case '1': return '水表';case '2': return 'C';}}},splitLine: {  //设置分隔线length: 15,  //设置属性length控制线长lineStyle: {  //设置属性lineStyle（详见lineStyle）控制线条样式color: 'auto'}},pointer: { //设置水表的指针宽度为2width: 2//设置指针长短length: "12%"},  title: { show: false },detail: { show: false },data: [{ value: 0.5, name: 'gas' }]}]};setInterval(function () {option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;myChart.setOption(option, true);}, 2000);  //每间2秒重新渲染一次，以实现动态效果</script>
</body></html>

参考文件官方文档

Echarts-仪表盘相关推荐

livecharts中仪表盘_Vue中使用Echarts仪表盘展示实时数据的实现
在vue中echarts仪表盘实时数据彩笔一枚,简单记录一下. 业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中. 第一步: 基于准备好的dom,初始化echarts仪表盘实例. ...
echarts 仪表盘图展示百分比
echarts 仪表盘图展示百分比效果图如下: 背景图一加,效果就好看多了代码: let myChart = echarts.getInstanceByDom(document.getElemen ...
echarts仪表盘option_ECharts仪表盘属性与使用
series[i]-gauge 用于表示ECharts仪表盘,当您要使用ECharts仪表盘的时候,需要将series中的type属性设置为" 'gauge' ",本节介绍了ECh ...
ECharts 仪表盘（gauge）改环形跑道使用方法分享
ECharts 仪表盘(gauge) 改环形数据跑道使用方法分享官方原效果这是ECharts的仪表盘,制作的多数据展示效果好了开始干活! 先跳过简单的部分,相信大家都能搞定前面的几步,如有不会 ...
使用echarts 仪表盘制作进度效果
好久没写博客了,感觉没什么技术难点需要记录,今天就把这两天遇到的比较费时费力的东西记录一下吧,代码没有注释,逻辑不难,echarts仪表盘的配置是最花时间的.老板就给了一个静态图片,取色都是用的qq ...
echarts 仪表盘 label 如何随径向展示
echarts 仪表盘 label 如何随径向展示一.需求默认情况下,仪表盘的 label 文字是横向水平展示的,我需要让它冲圆心对齐,径向显示. 二.实现需要 echarts 5.40 之后的 ...
Vue中使用Echarts仪表盘展示实时数据
在vue中echarts仪表盘实时数据彩笔一枚,简单记录一下. 业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中. 第一步: 基于准备好的dom,初始化echarts仪表盘实例. ...
html echart完整代码,html5 echarts仪表盘图标动画代码
特效描述:html5 echarts仪表盘图标动画代码.html5 echarts仪表盘图标动画代码代码结构 1. 引入JS 2. HTML代码 // 基于准备好的dom,初始化echarts图表 ...
echarts 仪表盘带进度条
echarts 仪表盘带进度条最终结果思路:3个仪表盘叠加代码: echarts.min.js 下载放到同级文件 <!DOCTYPE html> <html lang=" ...
ECharts仪表盘(详细示例——附有具体注释)
单仪表盘图表效果如下: 具体代码如下: <!DOCTYPE html> <html><head><meta charset="UTF-8" ...

Echarts-仪表盘

Echarts-仪表盘

1 绘制单仪表盘

2绘制多层仪表盘

3 绘制多仪表盘

Echarts-仪表盘相关推荐

最新文章

热门文章