精华内容
下载资源
问答
  • 腾讯管家测网速仪表盘echarts控件怎么写?

    腾讯管家测网速仪表盘echarts控件怎么写?
    在这里插入图片描述

    .zv-components .gauge(ref="gauge") span.title {{title}} div.bgc span.data {{data}} span.unit {{unit}} div

    emphasis: {
    // 高亮的 仪表盘指针样式
    itemStyle: {
    //高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
    }
    },
    title: {
    // 仪表盘标题。
    show: true, // 是否显示标题,默认 true。
    offsetCenter: [0, “50%”], //相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
    color: “#8B8B8B”, // 文字的颜色,默认 #333。
    fontSize: 20 // 文字的字体大小,默认 15。
    },

      detail: {
        // 仪表盘详情,用于显示数据。
        show: true, // 是否显示详情,默认 true。
        offsetCenter: [0, "50%"], // 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
        color: "#fff", // 文字的颜色,默认 auto。
         fontSize: 12, // 文字的字体大小,默认 15。
        backgroundColor: "#fff",
        width:200,
        // formatter: "{value}", // 格式化函数或者字符串
        // formatter: function(value) {
        //   return value
        // }
      },
      //   markPoint: {
    //     symbol: "circle",
    //     symbolSize: 8,
    //     data: [
    //       //跟你的仪表盘的中心位置对应上,颜色可以和画板底色一样
    //       { x: "center", y: "center", itemStyle: { color: "#FFF" } }
    //     ]
    //   },
     data: [{ value:"" , name: ""}]
    }
    

    ]
    };
    export default {
    name: “ZvChartPanel”,
    props: {
    data: {
    type: String
    },
    title: {
    type: String,
    default() {
    return “加载中”;
    }
    },
    name: {
    type: String,
    default() {
    return “加载中”;
    }
    },
    unit: {
    type: String,
    default() {
    return “”
    }
    },
    min: {
    type: Number,
    default() {
    return 0;
    }
    },
    max: {
    type: Number,
    default() {
    return 2500;
    }
    }
    },
    data() {
    return {
    chart: null,
    instanceChartOption: {}
    };
    },
    methods: {
    drawGauge() {
    let option = gaugeOption;
    this.chart = echarts.init(this.refs.gauge,"walden");option.series[0].min=this.min;option.series[0].max=this.max;option.series[0].data[0].value=(parseFloat(this.data)>2500?parseFloat(this.data)/2500.0:parseFloat(this.data)).toFixed(2)0;option.series[0].data[0].name=parseFloat(this.data)>2500?"x100"+this.unit:this.unit;option.tooltip.formatter=this.title+"<br/>cb";this.instanceChartOption=this.refs.gauge, "walden"); option.series[0].min = this.min; option.series[0].max = this.max; option.series[0].data[0].value = (parseFloat(this.data) > 2500 ? parseFloat(this.data) / 2500.0 : parseFloat(this.data) ).toFixed(2) - 0; option.series[0].data[0].name = parseFloat(this.data) > 2500 ? "x100 " + this.unit : this.unit; option.tooltip.formatter = this.title + "<br />{c} {b}"; this.instanceChartOption = this._.cloneDeep(option)
    this.chart.setOption(option, true);
    }
    },
    mounted() {
    this.drawGauge();
    },
    watch: {
    data(val) {
    this.instanceChartOption.series[0].data[0].value = val
    this.chart.setOption(this.instanceChartOption)
    }
    }
    };

    展开全文
  • 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仪表盘实例

    展开全文
  • HTML首先引入Echarts,然后在...Javascript接下来要初始化echarts实例,然后设置选项,最后渲染图像。var myChart = echarts.init(document.getElementById('myChart'));option = {tooltip : {formatter: "{a} {b}...

    HTML

    首先引入Echarts,然后在需要放置图表的地方加上div#myChart,同时给它加上宽度和高度属性。

    Javascript

    接下来要初始化echarts实例,然后设置选项,最后渲染图像。

    var myChart = echarts.init(document.getElementById('myChart'));

    option = {

    tooltip : {

    formatter: "{a}
    {b} : {c}%"

    },

    series : [

    {

    name:'业务指标',

    type:'gauge',

    detail : {formatter:'{value}%'}, //仪表盘显示数据

    axisLine: { //仪表盘轴线样式

    lineStyle: {

    width: 20

    }

    },

    splitLine: { //分割线样式

    length: 20

    },

    data:[{value: 50, name: '完成率'}]

    }

    ]

    };

    myChart.setOption(option);

    选项设置中的tooltip是一个提示框组件,默认参数show:true是显示提示框的。参数formatter是提示框浮层内容格式,它支持字符串模板和回调函数两种形式。一般我们使用字符串模板,模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为 'axis' 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a},{b},{c},{d} 含义不一样。对饼图、仪表盘、漏斗图三种类型的图表参数含义为: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)。

    选项中的series是系列列表。每个系列通过 type 决定自己的图表类型,它包含很多参数。其中参数name表示系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。参数type指图表类型,type:'gauge'即仪表盘。参数detail是指仪表盘详情,用于显示数据,可以定义数据显示的高宽大小,背景色,边框颜色等等,本例中定义了仪表盘的详情显示为百分数。参数axisLine可以定义仪表盘轴线相关配置,如轴线样式等。参数splitLine用来定义仪表盘中的分隔线样式,如线长、线的颜色、线宽等等。参数data则是用来展示数据的,可以设置仪表盘指标对应的值以及名称。

    如果是一个动态变化的仪表盘,可以使用setInterval()定时变换仪表值,如以下代码。

    clearInterval(timeTicket);

    var timeTicket = setInterval(function () {

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

    myChart.setOption(option, true);

    },2000);

    展开全文
  • 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);

    展开全文
  • 仪表盘截图Vue仪表盘样式vue代码总计Vue仪表盘样式js代码drawLine(){// 基于准备好的dom,初始化echarts实例var option = {// backgroundColor: '#003885',tooltip: {// formatter: '{a} {b} : {c}%'},series: [{...
  • require.config({paths:{echarts:"js/chart"}});require(['echarts','echarts/chart/gauge'],function(ec){var option ={tooltip : {formatter:"{a} {b} : {c}分"},toolbox: {//工具栏 如刷新、保存为图片等show : ...
  • 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....
  • echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能;不同段的颜色是通过axisLine->lineStyle->color来设置的;搜索...
  • echarts官方示例和默认样式都比较难看,经过一顿捣鼓实现比较漂亮的渐变仪表盘。第一步:设置轴线将图表轴线、label、分割线、隐藏,只保留刻度,然后修改刻度样式达到最终效果。不过要注意的是axisLine不能简单的...
  • endAngle: -45, // 仪表盘结束角度,默认 -45 clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。 min: 0, // 最小的数据值,默认 0 。映射到 minAngle。 max: 100, // 最大的数据值,默认 100 。映射到 max...
  • 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>...
  • ECharts 使用series.title.offsetCenter设置仪表盘标题位置ECharts 使用series.title.offsetCenter设置仪表盘标题位置1 使用详解series.title.offsetCenter说明:标题位置。相对于仪表盘中心的偏移位置,数组第一项...
  • var panel_agvid= echarts.init(document....panel_option={series : [{name:‘左上转速‘,type:‘gauge‘,center: [‘33%‘, ‘33%‘], //默认全局居中radius: ‘50%‘,clockwise:true, //仪表盘刻度顺时针增长min...
  • 效果图:option = {tooltip : {formatter: "{a} {b} : {c}%"},toolbox: {show : true,feature : {mark : {show: true},restore : {show: true},saveAsImage : {show: true}}},series : [{name:'业务指标',type:'...
  • 恩,则是一个很恶心的仪表盘,我不是很想写,但是客户需要啊,(捂脸),所以我就照着要求写了一份,做个备份,万一以后还能用到呢对吧。 这是效果图: 不算很好看,不过吧总算是做出来了,这是看一位大佬整理出来...
  • 试用Echarts图表组件中的仪表盘ECharts是一款开源、功能强大的数据可视化产品,紧跟着大数据时代的步伐!希望ECharts在未来继续发扬开源的力量,让国内外更多的人用上这款数据可视化产品,为企业、社会创造更大的...
  • Echarts仪表盘

    2016-09-02 09:26:05
    在写Echarts仪表盘的时候,怎么引用都提示不对,不是找不到这个,就是找不到那个 终于找到了便捷的解决办法 链接如下http://www.jb51.net/article/79665.htm 引用 src="echarts.min.js"> 或者 src=...
  • vue中echarts仪表盘实时数据。先看下效果图,如下:第一步:基于准备好的dom,初始化echarts仪表盘实例。第二步:我是通过父子组件传值把数据接收过来,在data中定义upPressure参数,并将接收来的devicePressure参数...
  • Echarts 实现炫酷仪表盘

    万次阅读 2018-06-15 13:10:32
    Echarts 实现炫酷仪表盘
  • 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' }, { ...
  • web组态,开发仪表组件echarts。 首先我们登陆系统就会看到新增的组件管理选项 如下图: 点击添加组件选择2D组件我们就可以建立一个自己的组件了 《组件设计器》由 基础设置(包括名称 code 类型...
  • var panel_agvid= echarts.init(document....panel_option={series : [{name:'左上转速',type:'gauge',center: ['33%', '33%'], //默认全局居中radius: '50%',clockwise:true, //仪表盘刻度顺时针增长min...
  • Echarts仪表盘 Echarts官网仪表盘Demo地址 我的需求是每一时刻要呈现多种数据(温度、风速、盐度、有效波高)考虑采用类似表格的布局方式来同时展示多个仪表盘以展示多种数据。 CSS浮动实现表格布局 首先利用css浮动...
  • 利用利用echarts实现汽车仪表盘动画效果代码结构1. 引入CSS2. 引入JS3. HTML代码里程51345kmD未充电3加速踏板0制动踏板552V总电压7.5A总电流var myChart = echarts.init(document.getElementById('main'));option = ...

空空如也

空空如也

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

仪表盘echarts