170Echarts - 仪表盘(Gauge Car Dark)

简介: 170Echarts - 仪表盘(Gauge Car Dark)
效果图

20190505151325480_.png

源代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="dist/extension/dataTool.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 1024px;height:768px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var option;
      option = {
        backgroundColor: '#1b1b1b',
        tooltip: {
          formatter: "{a} <br/>{c} {b}"
        },
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: true
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        series: [{
            name: '速度',
            type: 'gauge',
            min: 0,
            max: 220,
            splitNumber: 11,
            radius: '50%',
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                color: [
                  [0.09, 'lime'],
                  [0.82, '#1e90ff'],
                  [1, '#ff4500']
                ],
                width: 3,
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            axisLabel: { // 坐标轴小标记
              textStyle: { // 属性lineStyle控制线条样式
                fontWeight: 'bolder',
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            axisTick: { // 坐标轴小标记
              length: 15, // 属性length控制线长
              lineStyle: { // 属性lineStyle控制线条样式
                color: 'auto',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            splitLine: { // 分隔线
              length: 25, // 属性length控制线长
              lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
                width: 3,
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            pointer: { // 分隔线
              shadowColor: '#fff', //默认透明
              shadowBlur: 5
            },
            title: {
              textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 20,
                fontStyle: 'italic',
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            detail: {
              backgroundColor: 'rgba(30,144,255,0.8)',
              borderWidth: 1,
              borderColor: '#fff',
              shadowColor: '#fff', //默认透明
              shadowBlur: 5,
              offsetCenter: [0, '50%'], // x, y,单位px
              textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                fontWeight: 'bolder',
                color: '#fff'
              }
            },
            data: [{
              value: 40,
              name: 'km/h'
            }]
          },
          {
            name: '转速',
            type: 'gauge',
            center: ['25%', '55%'], // 默认全局居中
            radius: '30%',
            min: 0,
            max: 7,
            endAngle: 45,
            splitNumber: 7,
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                color: [
                  [0.29, 'lime'],
                  [0.86, '#1e90ff'],
                  [1, '#ff4500']
                ],
                width: 2,
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            axisLabel: { // 坐标轴小标记
              textStyle: { // 属性lineStyle控制线条样式
                fontWeight: 'bolder',
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            axisTick: { // 坐标轴小标记
              length: 12, // 属性length控制线长
              lineStyle: { // 属性lineStyle控制线条样式
                color: 'auto',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            splitLine: { // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
                width: 3,
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            pointer: {
              width: 5,
              shadowColor: '#fff', //默认透明
              shadowBlur: 5
            },
            title: {
              offsetCenter: [0, '-30%'], // x, y,单位px
              textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                fontWeight: 'bolder',
                fontStyle: 'italic',
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            detail: {
              //backgroundColor: 'rgba(30,144,255,0.8)',
              // borderWidth: 1,
              borderColor: '#fff',
              shadowColor: '#fff', //默认透明
              shadowBlur: 5,
              width: 80,
              height: 30,
              offsetCenter: [25, '20%'], // x, y,单位px
              textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                fontWeight: 'bolder',
                color: '#fff'
              }
            },
            data: [{
              value: 1.5,
              name: 'x1000 r/min'
            }]
          },
          {
            name: '油表',
            type: 'gauge',
            center: ['75%', '50%'], // 默认全局居中
            radius: '30%',
            min: 0,
            max: 2,
            startAngle: 135,
            endAngle: 45,
            splitNumber: 2,
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                color: [
                  [0.2, 'lime'],
                  [0.8, '#1e90ff'],
                  [1, '#ff4500']
                ],
                width: 2,
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            axisTick: { // 坐标轴小标记
              length: 12, // 属性length控制线长
              lineStyle: { // 属性lineStyle控制线条样式
                color: 'auto',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            axisLabel: {
              textStyle: { // 属性lineStyle控制线条样式
                fontWeight: 'bolder',
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              },
              formatter: function(v) {
                switch(v + '') {
                  case '0':
                    return 'E';
                  case '1':
                    return 'Gas';
                  case '2':
                    return 'F';
                }
              }
            },
            splitLine: { // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
                width: 3,
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            pointer: {
              width: 2,
              shadowColor: '#fff', //默认透明
              shadowBlur: 5
            },
            title: {
              show: false
            },
            detail: {
              show: false
            },
            data: [{
              value: 0.5,
              name: 'gas'
            }]
          },
          {
            name: '水表',
            type: 'gauge',
            center: ['75%', '50%'], // 默认全局居中
            radius: '30%',
            min: 0,
            max: 2,
            startAngle: 315,
            endAngle: 225,
            splitNumber: 2,
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                color: [
                  [0.2, 'lime'],
                  [0.8, '#1e90ff'],
                  [1, '#ff4500']
                ],
                width: 2,
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            axisTick: { // 坐标轴小标记
              show: false
            },
            axisLabel: {
              textStyle: { // 属性lineStyle控制线条样式
                fontWeight: 'bolder',
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              },
              formatter: function(v) {
                switch(v + '') {
                  case '0':
                    return 'H';
                  case '1':
                    return 'Water';
                  case '2':
                    return 'C';
                }
              }
            },
            splitLine: { // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
                width: 3,
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            pointer: {
              width: 2,
              shadowColor: '#fff', //默认透明
              shadowBlur: 5
            },
            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);
      }, 2000)
      myChart.setOption(option);
    </script>
  </body>
</html>
目录
相关文章
|
3月前
|
数据可视化 Apache 索引
Vue3使用echarts仪表盘(gauge)
Apache ECharts 是一款强大的数据可视化库,其仪表盘图表(`gauge`)可用于展示度量数据。主要属性包括仪表盘数据源 `gaugeData`(必填)、容器宽度 `width`(默认 100%)及高度 `height`(默认 100%)。数据项需指定名称 `name` 和值 `value`,并支持额外属性。
184 2
Vue3使用echarts仪表盘(gauge)
关于ECharts仪表盘的全部相关配置
关于ECharts仪表盘的全部相关配置
104 0
echarts仪表盘更换样式全圆形换成半圆
echarts仪表盘更换样式全圆形换成半圆
127 0
echarts 仪表盘三分钟上手及属性修改示例
echarts 仪表盘三分钟上手及属性修改示例
166 0
170Echarts - 仪表盘(Gauge Car)
170Echarts - 仪表盘(Gauge Car)
31 0
169Echarts - 仪表盘(Gauge)
169Echarts - 仪表盘(Gauge)
85 0
|
1月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
55 1
|
1月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
219 0

热门文章

最新文章