echarts 仪表盘三分钟上手及属性修改示例

简介: echarts 仪表盘三分钟上手及属性修改示例
1:echarts 后面仪表盘三分钟上手示例
  • 引入相关的文件
<!-- 引入 echarts.js -->
        <script src="js/echarts.min.js"></script>
        <script src="js/jquery-1.11.3.js"></script>
  • 原始默认显示如下
  • 三分钟代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>三分钟上手之仪表盘</title>
        <!-- 引入 echarts.js -->
        <script src="js/echarts.min.js"></script>
        <script src="js/jquery-1.11.3.js"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            myChart.setOption({
                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);
        </script>
    </body>
</html>

2:相关修改

  • 需求一:把总体的背景色改为黑色

首先,把总体的背景色改为黑色,显得比较高大上添加属性:backgroundColor: '#12cf96',

  • 需求二:仪表盘刻度颜色

在series里面添加代码,让 红色在0-20 ,80-100是绿色

axisLine: {            // 坐标轴线  
                     lineStyle: {       // 属性lineStyle控制线条样式  
                         color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']]
                                }  
                            },   
相关文章
ECharts 提示框组件Tooltip属性大全(包含文本注释)
ECharts 提示框组件Tooltip属性大全(包含文本注释)
415 0
|
3月前
Echarts visualMap属性记录
这篇文章是关于ECharts中visualMap属性的详细记录。文中首先定义了visualMap的作用,即进行数据到视觉元素的映射。接着,通过一系列详细的配置参数,如类型、显示控制、数据范围、样式和格式化工具等,介绍了如何配置连续型和分段型visualMap组件。最后,作者通过具体代码示例,说明了如何将这些配置应用于实际的ECharts图表中,以实现数据的视觉编码效果。
109 0
Echarts visualMap属性记录
|
4月前
|
数据可视化 Apache 索引
Vue3使用echarts仪表盘(gauge)
Apache ECharts 是一款强大的数据可视化库,其仪表盘图表(`gauge`)可用于展示度量数据。主要属性包括仪表盘数据源 `gaugeData`(必填)、容器宽度 `width`(默认 100%)及高度 `height`(默认 100%)。数据项需指定名称 `name` 和值 `value`,并支持额外属性。
287 2
Vue3使用echarts仪表盘(gauge)
|
7月前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
155 0
Echarts tooltip配置项的属性 图表悬浮框
Echarts tooltip配置项的属性 图表悬浮框
ECharts分段型视觉映射组件的属性修改
ECharts分段型视觉映射组件的属性修改
65 0
echarts仪表盘更换样式全圆形换成半圆
echarts仪表盘更换样式全圆形换成半圆
142 0
|
前端开发
【前端统计图】echarts实现属性修改
【前端统计图】echarts实现属性修改
66 0
echarts改变颜色属性的demo
echarts改变颜色属性的demo
43 0
|
前端开发
【前端统计图】echarts改变颜色属性的demo
【前端统计图】echarts改变颜色属性的demo
47 0

热门文章

最新文章