精华内容
下载资源
问答
  • 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仪表盘实例

    展开全文
  • 仪表盘截图Vue仪表盘样式vue代码总计Vue仪表盘样式js代码drawLine(){// 基于准备好的dom,初始化echarts实例var option = {// backgroundColor: '#003885',tooltip: {// formatter: '{a} {b} : {c}%'},series: [{...

    仪表盘截图

    Vue仪表盘样式vue代码

    总计

    Vue仪表盘样式js代码

    drawLine(){

    // 基于准备好的dom,初始化echarts实例

    var option = {

    // backgroundColor: '#003885',

    tooltip: {

    // formatter: '{a}
    {b} : {c}%'

    },

    series: [{

    name: '总计',

    type: 'gauge',

    center: ['50%', '30%'],    // 默认全局居中,,,

    radius: '50%',

    min: 0,

    max: 90,

    axisLine: {            // 坐标轴线

    lineStyle: { // 属性lineStyle控制线条样式

    color: [

    [0.09, '#1e90ff'],

    [0.82, '#1e90ff'],

    [1, '#1e90ff']

    ],

    width: 6,

    shadowColor: '#fff', //默认透明

    shadowBlur: 10

    }

    },

    axisTick: {            // 坐标轴小标记

    length: 12,        // 属性length控制线长

    lineStyle: {      // 属性lineStyle控制线条样式

    color: 'auto'

    }

    },

    splitLine: {          // 分隔线

    length: 20,        // 属性length控制线长

    lineStyle: {      // 属性lineStyle(详见lineStyle)控制线条样式

    color: 'auto'

    }

    },

    //刻度标签。

    axisLabel: {

    color: "#fff",

    },

    pointer: {

    length:'85%',

    },

    title: {

    offsetCenter: [0, '68%'],      // x, y,单位px

    fontWeight: 'bolder',

    fontSize: 15,

    fontStyle: 'italic',

    color: '#fff',

    shadowColor: '#fff', //默认透明

    shadowBlur: 10,

    },

    detail: {

    // 其余属性默认使用全局文本样式,详见TEXTSTYLE

    fontFamily:"YourWebFontName",

    formatter: "{value}/90",

    offsetCenter: [0, 0],

    backgroundColor: '#081327',

    // shadowColor:"red",

    color : "#fff",

    shadowBlur:44,

    borderRadius:58,

    borderColor:'#0d2049',

    borderWidth:1,

    width:74,

    height:84,

    lineHeight: 84,

    rich : {

    score : {

    color : "#fff",

    fontSize : 17,

    padding:0

    }

    }

    },

    data: [{value: 47, name: '数字资产登记数量'}]

    },{

    name: '外侧线条',

    type: 'gauge',

    //起始角度。圆心 正右手侧为0度,正上方为90度,正左手侧为180度。

    startAngle: 225,

    //结束角度。

    endAngle: 84,

    center: ['50%', '30%'],    // 默认全局居中

    //半径

    radius: '55%',

    //仪表盘轴线相关配置。

    axisLine: {            // 坐标轴线

    show:true,

    lineStyle: {      // 属性lineStyle控制线条样式

    width: 3,

    color:[

    [1,new echarts.graphic.LinearGradient(0, 1, 1, 0, [

    {

    offset: 0.1,

    color: "#07182c"

    },

    {

    offset: 0.3,

    color: "#ced9eb"

    },

    {

    offset: 0.6,

    color: "#ced9eb"

    },

    {

    offset: 1,

    color: "#ced9eb"

    }

    ])

    ]

    ]

    },

    },

    //分隔线样式。

    splitLine: {

    show: false,

    },

    //刻度样式

    axisTick: {

    show: false,

    },

    //刻度标签。

    axisLabel: {

    show:false,

    },

    //仪表盘指针。

    pointer: {

    //这个show属性好像有问题,因为在这次开发中,需要去掉指正,我设置false的时候,还是显示指针,估计是BUG吧,我用的echarts-3.2.3;希望改进。最终,我把width属性设置为0,成功搞定!

    show: false,

    },

    //仪表盘标题。

    title: {

    show: false

    },

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

    detail: {

    show: false,

    offsetCenter: [0, '-10%'],

    formatter: '',

    textStyle: {

    fontSize: 0

    }

    },

    data: [

    {name:'数量', value:'n'},

    ],

    zlevel:3

    }],

    };

    let myChart = this.$echarts.init(document.getElementById('myChartsa'));

    myChart.setOption(option);

    }

    展开全文
  • require.config({paths:{echarts:"js/chart"}});require(['echarts','echarts/chart/gauge'],function(ec){var option ={tooltip : {formatter:"{a} {b} : {c}分"},toolbox: {//工具栏 如刷新、保存为图片等show : ...

    require.config({

    paths:{

    echarts:"js/chart"}

    });

    require(['echarts','echarts/chart/gauge'],function(ec){var option ={

    tooltip : {

    formatter:"{a}
    {b} : {c}分"},

    toolbox: {//工具栏 如刷新、保存为图片等

    show : false,/*feature : {

    mark : {show: true},

    restore : {show: true},

    saveAsImage : {show: true}

    }*/},

    series : [

    {

    name:'',//仪表盘名字

    type:'gauge',//类型是仪表盘

    radius: 70,

    data:[{value:85, name: '得分'}],//仪表盘的值为85,鼠标经过时显示的框名字为“得分”

    center : ['50%', '78'],//仪表盘的位置 第一个值为x轴,第二个值为y轴

    startAngle:180,//开始角度

    endAngle:0,//结束角度

    splitNumber: "none",//刻度的值,如果设置为0,在IE8中,左上角有多一块内容,不需要显示就设置为none,需要显示就设置具体数值,如10

    axisLine: { //坐标轴线,也就是圆圈的边框线

    show: false, //默认显示,属性show控制显示与否

    lineStyle: { //属性lineStyle控制线条样式

    //color: [[0.2, 'f9fafb'],[0.4, 'orange'],[0.8, 'skyblue'],[1, '#ff4500']],

    width: 10}

    },

    pointer: {//point为设置指针箭头的效果

    //这个show属性好像有问题,因为在这次开发中,需要去掉指正,我设置false的时候,还是显示指针,估计是BUG吧,我用的echarts-3.2.3;希望改进。最终,我把width属性设置为0,成功搞定!

    //当鼠标经过时会显示 箭头中间会显示一条白色的区域,这个区域可以通过css调整 如#map canvas[data-zr-dom-id=_zrender_hover_]{display: none!important;}

    show: true,//指针长度

    length:'60%',

    width:4,

    color:"#000"},

    textStyle: {//其余属性默认使用全局文本样式,详见TEXTSTYLE

    //color: '#333'

    },

    splitLine: {//分隔线

    show: false, //默认显示,属性show控制显示与否

    length :20, //属性length控制线长

    lineStyle: { //属性lineStyle(详见lineStyle)控制线条样式

    //color: '#eee',

    width: 2,

    type:'solid'}

    },

    title : {

    show :false,//offsetCenter: ['-65%', -10], // x, y,单位px

    textStyle: { //其余属性默认使用全局文本样式,详见TEXTSTYLE

    color: '#333',

    fontSize :15}

    },

    detail : {//最下边数值的设置

    show : true,//backgroundColor: 'rgba(0,0,0,0)',

    //borderWidth: 0,

    //borderColor: '#ccc',

    //width: 100,

    //height: 40,

    offsetCenter: ['0', '10'], //x, y,单位px

    formatter:'{value}%',

    textStyle: {//其余属性默认使用全局文本样式,详见TEXTSTYLE

    color: '#3ebf27',

    fontSize :18}

    },

    axisTick: {//坐标轴小标记

    show: false, //属性show控制显示与否,默认不显示

    splitNumber: 5, //每份split细分多少段

    length :8, //属性length控制线长

    lineStyle: { //属性lineStyle控制线条样式

    color: '#eee',

    width:1,

    type:'solid'}

    }

    }

    ]

    };var authWay = ec.init(document.getElementById("map"));

    authWay.setOption(option);

    window.οnresize=authWay.resize;

    });

    展开全文
  • option = {backgroundColor:"#293c55",series : [{name: '速度',type: 'gauge',center:["50%","50%"], //仪表盘在画布中的位置min: 0,max:100,splitNumber: 10, //仪表盘分割段数radius: '50%',axisLine: { // 坐标...

    option = {

    backgroundColor:"#293c55",

    series : [

    {

    name: '速度',

    type: 'gauge',

    center:["50%","50%"], //仪表盘在画布中的位置

    min: 0,

    max:100,

    splitNumber: 10, //仪表盘分割段数

    radius: '50%',

    axisLine: { // 坐标轴线

    show:true,

    lineStyle: { // 属性lineStyle控制线条样式

    width: 30, //表盘宽度

    color:[[1, '#3fa7dc']] //设置仪表盘颜色和指针颜色

    }

    },

    axisTick: { // 坐标轴小标记

    length: -10, // 属性length控制线长 刻度长度 负值刻度朝外,正值刻度朝内

    lineStyle: { // 属性lineStyle控制线条样式

    color: 'auto',

    }

    },

    splitLine: { // 分隔线

    length: -16, // 属性length控制线长 负值刻度朝外,正值刻度朝内

    lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式

    color: '#ccc' // 分割线颜色

    }

    },

    axisLabel: {

    // backgroundColor: 'auto', //设置刻度数值的背景颜色

    // borderRadius: 2, //设置圆角

    color: '#eee',

    // padding: 3,

    textShadowBlur: 2,

    textShadowOffsetX: 1,

    textShadowOffsetY: 0,

    textShadowColor: '#222',

    padding:[-15,-8,0,-15],

    },

    detail: {

    // 其余属性默认使用全局文本样式,详见TEXTSTYLE

    formatter: function (value) {

    value = (value + '').split('.');

    value.length<2&& (value.push('00'));

    return ('00' + value[0]).slice(-2)

    + '.' + (value[1] + '00').slice(0, 2)+"%";

    },

    fontSize:24, //文字大小

    // fontWeight: 'bolder', //字体粗细

    // borderRadius: 3, //文字边框圆角

    // backgroundColor: '#444', // 文字背景颜色

    // borderColor: '#aaa', //文字边框颜色

    shadowBlur: 5, //文字背景阴影长度

    shadowColor: '#0ff', //文字背景颜色

    shadowOffsetX: 0, //文字背景阴影x偏移

    shadowOffsetY:3, //文字背景y偏移

    // borderWidth: 2, //边框粗细

    textBorderColor: '#000', //文字描边颜色

    textBorderWidth: 2, // 文字描边宽度

    textShadowBlur: 2, //文字背景阴影长度

    textShadowColor: '#fff', //文字本身阴影颜色

    textShadowOffsetX: 0, //文字阴影x偏移

    textShadowOffsetY: 0, //文字阴影y偏移

    fontFamily: 'Arial',

    width: 100, //文字块宽度

    color: '#fff', //文字块颜色

    rich: {},

    },

    data: [{value: 91.3}],

    },

    ]

    };

    myChart.setOption(option,true);

    // 定时改变数值

    // setInterval(function (){

    // option.series[0].data[0].value= (Math.random()*100).toFixed(2)- 0;

    // myChart.setOption(option,true);

    // },2000);

    展开全文
  • html5 echarts仪表盘动画特效是一款圆形的汽车加速仪表盘图表动画特效。
  • echarts仪表盘颜色渐变

    千次阅读 2019-04-24 14:55:45
    echarts仪表盘背景颜色渐变 echarts仪表盘背景颜色渐变,offset设置偏移量 代码 option = { tooltip : { formatter: "{a} <br/>{b} : {c}%" }, toolbox: { feature: { restore: {}, ...
  • option ={title: {},tooltip: {formatter:'{a} {b} : {c}%'},series: [{//类型type: 'gauge',//半径radius: 80,//起始角度。圆心 正右手侧为0度,正上方为90度,正...endAngle: -30,center: ['50%', '60%'],//仪表...
  • echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能;不同段的颜色是通过axisLine->lineStyle->color来设置的;搜索...
  • 'gauge', min: 0, max: 10, radius: "80%", splitNumber: 1, //刻度数量 startAngle: 180, endAngle: 0, axisLine: { // 坐标轴线 lineStyle: { // 属性lineStyle控制线条样式 width: 60, color: [ [1, new echarts....
  • html5 echarts仪表盘动画特效是一款圆形的汽车加速仪表盘图表动画特效。
  • 在vue中echarts仪表盘实时数据 彩笔一枚,简单记录一下。 业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中。 第一步: 基于准备好的dom,初始化echarts仪表盘实例。 第二步: 我是通过父子组件传值把...
  • endAngle: -45, // 仪表盘结束角度,默认 -45 clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。 min: 0, // 最小的数据值,默认 0 。映射到 minAngle。 max: 100, // 最大的数据值,默认 100 。映射到 max...
  • Echarts仪表

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

    千次阅读 2020-10-30 14:40:22
    在vue中echarts仪表盘实时数据 彩笔一枚,简单记录一下。 业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中。 第一步: 基于准备好的dom,初始化echarts仪表盘实例。 第二步: 我是通过父子组件传值把...
  • vue中echarts仪表盘实时数据。先看下效果图,如下:第一步:基于准备好的dom,初始化echarts仪表盘实例。第二步:我是通过父子组件传值把数据接收过来,在data中定义upPressure参数,并将接收来的devicePressure参数...
  • echarts仪表盘渐变问题

    千次阅读 2019-04-30 17:08:58
    echarts仪表盘下半圆隐约存在 原因: 目前设置的axisLine.lineStyle.color,不是只是分段颜色设置,为了渐变衔接的效果,有一部分点是叠加了两层颜色设置。 先全长度铺了一层绿色,从左往右透明度降低;再从0.8的...
  • echarts 仪表盘带进度条

    千次阅读 2018-07-11 09:47:34
    echarts 仪表盘带进度条最终结果思路:3个仪表盘叠加代码: echarts.min.js 下载放到同级文件&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta ...
  • echarts仪表盘点击打分实现

    千次阅读 2019-06-02 21:50:40
    Echarts仪表盘刻度点击 项目中需要使用仪表盘来做一个打分的功能,·下面是一个官网的仪表盘,是没有刻度的点击事件的,所以就要手动实现一个了, 思路 这里的一个方框指的是一个canvas,然后根据比例获取到仪表...
  • 关于ECharts仪表盘的全部相关配置 <html> <head> <meta charset="UTF-8"> <title>单仪表盘案例</title> <!-- 引入 ECharts 文件 --> <script src="js/echarts...
  • 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>...
  • 在vue中echarts仪表盘实时数据彩笔一枚,简单记录一下。业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中。第一步:基于准备好的dom,初始化echarts仪表盘实例。第二步:我是通过父子组件传值把数据接收...
  • echarts仪表盘不靠边的解决办法

    千次阅读 2019-08-21 21:22:25
    echarts仪表盘不靠边的解决办法 仪表盘中,默认图表是水平垂直居中,如果要改外边距,用grid是不行的, 要用 center , center:['50%','50%'],第一个左,第二个上 一个整圆,要加起来小于等于359.9度,如果整360...
  • echarts仪表

    2019-01-29 10:24:27
    echarts链接:https://gallery.echartsjs.com/editor.html?c=xkasbcOqh0 代码: var axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#87F3ED' }, { ...
  • 效果图:option = {tooltip : {formatter: "{a} {b} : {c}%"},toolbox: {show : true,feature : {mark : {show: true},restore : {show: true},saveAsImage : {show: true}}},series : [{name:'业务指标',type:'...

空空如也

空空如也

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

echarts仪表