精华内容
下载资源
问答
  • series[i]-gauge 用于表示ECharts仪表盘,当您要使用ECharts仪表盘的时候,需要将series中的type属性设置为“ 'gauge' ”,本节介绍了ECharts仪表盘的一些通用属性,其中,您可以通过data属性来设置指针的指示方向。...

    series[i]-gauge 用于表示ECharts仪表盘,当您要使用ECharts仪表盘的时候,需要将series中的type属性设置为“ 'gauge' ”,本节介绍了ECharts仪表盘的一些通用属性,其中,您可以通过data属性来设置指针的指示方向。本节以一个简单的仪表盘实例开始,如下所示:

    ECharts仪表盘属性type

    type 属性的值应该设置为:'gauge'name

    系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。radius

    仪表盘半径,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值,默认的值为 75%。

    {{ use partial-legend-hover-link }}startAngle

    仪表盘起始角度,默认为 225。圆心 正右手侧为0度,正上方为90度,正左手侧为180度。endAngle

    仪表盘结束角度,默认情况下为 -45。clockwise

    仪表盘刻度是否是顺时针增长,默认为 true。min

    最小的数据值,默认为0,映射到 minAngle。max

    最大的数据值,默认为100,映射到 maxAngle。splitNumber

    仪表盘刻度的分割段数,默认分割为10段。axisLine

    仪表盘轴线相关配置。splitLine

    仪表盘分隔线样式。axisTick

    仪表盘中刻度的样式。axisLabel

    设置仪表盘的刻度标签。pointer

    仪表盘指针。itemStyle

    仪表盘指针样式。title

    仪表盘标题。detail

    仪表盘详情,用于显示数据。markPoint

    仪表盘图表的标注。markLine

    仪表盘图表的标线。markArea

    仪表盘图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。silent

    图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。animation

    仪表盘是否开启动画,默认为true。animationThreshold

    是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。默认阈值为2000。animationDuration

    初始动画的时长,默认时长为1000,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果:animationDuration: function (idx) {

    // 越往后的数据延迟越大

    return idx * 100;

    }animationEasing

    初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。animationDelay

    初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

    如下示例:animationDelay: function (idx) {

    // 越往后的数据延迟越大

    return idx * 100;

    }

    也可以看该示例animationDurationUpdate

    数据更新动画的时长。默认情况下为 300。

    支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果:animationDurationUpdate: function (idx) {

    // 越往后的数据延迟越大

    return idx * 100;

    }animationEasingUpdate

    数据更新动画的缓动效果。animationDelayUpdate

    数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

    如下示例:animationDelayUpdate: function (idx) {

    // 越往后的数据延迟越大

    return idx * 100;

    }

    也可以看该示例tooltip

    本系列特定的 tooltip 设定。

    更多ECharts仪表盘实例

    展开全文
  • Echarts仪表盘

    2016-09-02 09:26:05
    在写Echarts仪表盘的时候,怎么引用都提示不对,不是找不到这个,就是找不到那个 终于找到了便捷的解决办法 链接如下http://www.jb51.net/article/79665.htm 引用 src="echarts.min.js"> 或者 src=...

    在写Echarts仪表盘的时候,怎么引用都提示不对,不是找不到这个,就是找不到那个

    终于找到了便捷的解决办法

    链接如下http://www.jb51.net/article/79665.htm


    引用<script src="echarts.min.js"></script>

    或者<script src="echarts-all.js"></script>

    别的就可以和上述的一样了

    展开全文
  • echarts 仪表盘

    2019-05-30 19:23:04
    ####1:echarts 后面仪表盘三分钟上手示例 引入相关的文件 <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script> <script src="js/jquery-1.11.3.js"></script>...

    ####1:echarts 后面仪表盘三分钟上手示例

    • 引入相关的文件
    <!-- 引入 echarts.js -->
    		<script src="js/echarts.min.js"></script>
    		<script src="js/jquery-1.11.3.js"></script>
    
    • 原始默认显示如下

    图片.png

    <!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',
      图片.png
      效果如下
      图片.png

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

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

    axisLine: {            // 坐标轴线  
                         lineStyle: {       // 属性lineStyle控制线条样式  
                             color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']]
                                    }  
                                },   
    

    图片.png

    图片.png

    原文作者:祈澈姑娘
    关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

    展开全文
  • echarts仪表盘

    2021-02-03 11:34:32
    { color: [ [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0.1, color: "#FFC600" }, { offset: 0.6, color: "#30D27C" }, { offset: 1, color: "rgba(245,245,220,0.01)" } ]) ] ] } }

    参考他人案例

    option = {
        backgroundColor: '#1b1b1b',
        series: [
            {
               type: 'gauge',
                min: 0,
                max: 220,
                splitNumber: 10,
                radius: '70%',
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                      //  color: [[0.01, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
                        color: [[0.3, 'rgba(42,144,255,0.95)'],             
                        [0.82, 'rgba(245,245,220,0.05)']
                        ],
                        width: 15,//盘表圆宽度
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 15,
                        
                    },
                    roundCap:true
                },
                //capType: 'round',
                startAngle: 180,//盘角度起始位置
                endAngle:-45,//盘角度截至位置
                axisLabel: {            // 坐标轴小标记 -刻度数
                    fontWeight: 'bolder',
                   // color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 15,
                    show:false
                },
                axisTick: {            // 坐标轴小标记
                    length: 9,        // 属性length控制线长
                    // lineStyle: {       // 属性lineStyle控制线条样式
                    //   // color:[1,'rgba(255,255,0,0.5)'],
                    //     shadowColor: 'rgba(124,252,0,5)', //默认透明
                    //     shadowBlur: 10
                    // },
                    //show:false
                     
                },
                splitLine: {           // 坐标轴大标记
                    length:25,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
                        width: 5,
                        color: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 15
                    },
                    show:false
                },
                pointer: {           // 指针
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5,
                    length: 0,
                    show:false
                },
                title: {//data-name 样式,位置
                     offsetCenter: [0, '-15%'],       //改变标题的位置
                    textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 28,
                         fontStyle: 'normal',
                        color: '#fff'
                    }
                },
                detail: {//data-Value 样式,位置
                  
                    offsetCenter: [0, -110],       // x, y,单位px
                    textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                        //fontWeight: 'bolder',
                        color: '#fff'
                    },
                    fontSize: 35,
                    formatter: '{value}%'
                },
                data: [{value:45.5,name:'园区温度'}],
            //roundCap: true
            },
             
        ]
    };
    

    效果如下:
    在这里插入图片描述

    渐变色

    这里的渐变色,还是问题的,如何提取Value 的值,比如45.5%, 在
    offset1中 设置为’value’*0.3,
    offset2中设置为 ‘value’*0.7,
    offset3为空缺 rgba(245,245,220,0.01)

     axisLine: {             
                    lineStyle: {
                      color: [
                        [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                          {
                            offset: 0.1,
                            color: "#FFC600"
                          },
                          {
                            offset: 0.6,
                            color: "#30D27C"
                          },
                          {
                            offset: 1,
                            color: "rgba(245,245,220,0.01)"
                          }
                        ])
                      ]
                    ]
                      
                    }
                 }
    
    展开全文
  • 仪表盘截图Vue仪表盘样式vue代码总计Vue仪表盘样式js代码drawLine(){// 基于准备好的dom,初始化echarts实例var option = {// backgroundColor: '#003885',tooltip: {// formatter: '{a} {b} : {c}%'},series: [{...
  • option = {backgroundColor:"#293c55",series : [{name: '速度',type: 'gauge',center:["50%","50%"], //仪表盘在画布中的位置min: 0,max:100,splitNumber: 10, //仪表盘分割段数radius: '50%',axisLine: { // 坐标...
  • require.config({paths:{echarts:"js/chart"}});require(['echarts','echarts/chart/gauge'],function(ec){var option ={tooltip : {formatter:"{a} {b} : {c}分"},toolbox: {//工具栏 如刷新、保存为图片等show : ...
  • echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能;不同段的颜色是通过axisLine->lineStyle->color来设置的;搜索...
  • option ={title: {},tooltip: {formatter:'{a} {b} : {c}%'},series: [{//类型type: 'gauge',//半径radius: 80,//起始角度。圆心 正右手侧为0度,正上方为90度,正...endAngle: -30,center: ['50%', '60%'],//仪表...
  • 'gauge', min: 0, max: 10, radius: "80%", splitNumber: 1, //刻度数量 startAngle: 180, endAngle: 0, axisLine: { // 坐标轴线 lineStyle: { // 属性lineStyle控制线条样式 width: 60, color: [ [1, new echarts....
  • html5 echarts仪表盘动画特效是一款圆形的汽车加速仪表盘图表动画特效。
  • endAngle: -45, // 仪表盘结束角度,默认 -45 clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。 min: 0, // 最小的数据值,默认 0 。映射到 minAngle。 max: 100, // 最大的数据值,默认 100 。映射到 max...
  • echarts仪表盘颜色渐变

    千次阅读 2019-04-24 14:55:45
    echarts仪表盘背景颜色渐变 echarts仪表盘背景颜色渐变,offset设置偏移量 代码 option = { tooltip : { formatter: "{a} <br/>{b} : {c}%" }, toolbox: { feature: { restore: {}, ...
  • html5 echarts仪表盘动画特效是一款圆形的汽车加速仪表盘图表动画特效。
  • 在vue中echarts仪表盘实时数据 彩笔一枚,简单记录一下。 业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中。 第一步: 基于准备好的dom,初始化echarts仪表盘实例。 第二步: 我是通过父子组件传值把...
  • vue中echarts仪表盘实时数据。先看下效果图,如下:第一步:基于准备好的dom,初始化echarts仪表盘实例。第二步:我是通过父子组件传值把数据接收过来,在data中定义upPressure参数,并将接收来的devicePressure参数...
  • vue Echarts 仪表盘案例

    2020-05-31 16:42:48
    vue Echarts 仪表盘案例      1、main.js   页面 import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import...
  • ECharts仪表盘样式设置

    千次阅读 2019-08-22 18:10:41
    <!DOCTYPE html> <... <head> ...meta charset="UTF-8">...ECharts仪表盘样式设置</title> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></sc...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 552
精华内容 220
关键字:

echarts仪表盘