169Echarts - 仪表盘(Gauge)

简介: 169Echarts - 仪表盘(Gauge)
效果图

源代码
<!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 = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        series: [{
          name: '业务指标',
          type: 'gauge',
          detail: {
            formatter: '{value}%'
          },
          data: [{
            value: 50,
            name: '完成率'
          }]
        }]
      };
      setInterval(function() {
        option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
        myChart.setOption(option, true);
      }, 2000);
      myChart.setOption(option);
    </script>
  </body>
</html>
目录
相关文章
|
10月前
关于ECharts仪表盘的全部相关配置
关于ECharts仪表盘的全部相关配置
70 0
|
6月前
echarts仪表盘更换样式全圆形换成半圆
echarts仪表盘更换样式全圆形换成半圆
54 0
|
6月前
echarts 仪表盘三分钟上手及属性修改示例
echarts 仪表盘三分钟上手及属性修改示例
70 0
|
7月前
170Echarts - 仪表盘(Gauge Car Dark)
170Echarts - 仪表盘(Gauge Car Dark)
18 0
|
7月前
170Echarts - 仪表盘(Gauge Car)
170Echarts - 仪表盘(Gauge Car)
18 0
Echarts案例:整一个炫酷一点的仪表盘
Echarts案例:整一个炫酷一点的仪表盘
476 1
Echarts案例:整一个炫酷一点的仪表盘
echarts仪表盘美化
echarts仪表盘美化
380 0
|
1天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
32 0