指定图表的配置项和数据

var option = {

backgroundColor: "#000",

tooltip: { // 本系列特定的 tooltip 设定。

show: true,

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

backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意:series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。

borderColor: "#333", // 提示框浮层的边框颜色。...

borderWidth: 0, // 提示框浮层的边框宽。...

padding: 5, // 提示框浮层内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。...

textStyle: { // 提示框浮层的文本样式。...

// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......

},

},

series: [

{

name: "单仪表盘示例", // 系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

type: "gauge", // 系列类型

radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。

center: ["50%", "55%"], // 仪表盘位置(圆心坐标)

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

endAngle: -45, // 仪表盘结束角度,默认 -45

clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。

min: 0, // 最小的数据值,默认 0 。映射到 minAngle。

max: 100, // 最大的数据值,默认 100 。映射到 maxAngle。

splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。

axisLine: { // 仪表盘轴线(轮廓线)相关配置。

show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。

lineStyle: { // 仪表盘轴线样式。

color: colorTemplate1, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值:[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]

opacity: 1, //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

width: 30, //轴线宽度,默认 30。

shadowBlur: 20, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

shadowColor: "#fff", //阴影颜色。支持的格式同color。

}

},

splitLine: { // 分隔线样式。

show: true, // 是否显示分隔线,默认 true。

length: 30, // 分隔线线长。支持相对半径的百分比,默认 30。

lineStyle: { // 分隔线样式。

color: "#eee", //线的颜色,默认 #eee。

opacity: 1, //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

width: 2, //线度,默认 2。

type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted

shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

shadowColor: "#fff", //阴影颜色。支持的格式同color。

}

},

axisTick: { // 刻度(线)样式。

show: true, // 是否显示刻度(线),默认 true。

splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。

length: 8, // 刻度线长。支持相对半径的百分比,默认 8。

lineStyle: { // 刻度线样式。

color: "#eee", //线的颜色,默认 #eee。

opacity: 1, //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

width: 1, //线度,默认 1。

type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted

shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

shadowColor: "#fff", //阴影颜色。支持的格式同color。

},

},

axisLabel: { // 刻度标签。

show: true, // 是否显示标签,默认 true。

distance: 5, // 标签与刻度线的距离,默认 5。

color: "#fff", // 文字的颜色,默认 #fff。

fontSize: 12, // 文字的字体大小,默认 5。

formatter: "{value}", // 刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板,模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板,函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}

},

pointer: { // 仪表盘指针。

show: true, // 是否显示指针,默认 true。

length: "70%", // 指针长度,可以是绝对数值,也可以是相对于半径的百分比,默认 80%。

width: 5, // 指针宽度,默认 8。

},

itemStyle: { // 仪表盘指针样式。

color: "auto", // 指针颜色,默认(auto)取数值所在的区间的颜色

opacity: 1, // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。

borderType: "solid", // 柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'。

borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color,不支持回调函数。

shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

shadowColor: "#fff", // 阴影颜色。支持的格式同color。

},

emphasis: { // 高亮的 仪表盘指针样式

itemStyle: {

//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。

}

},

title: { // 仪表盘标题。

show: true, // 是否显示标题,默认 true。

offsetCenter: [0,"20%"],//相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。

color: "#fff", // 文字的颜色,默认 #333。

fontSize: 20, // 文字的字体大小,默认 15。

},

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

show: true, // 是否显示详情,默认 true。

offsetCenter: [0,"50%"],// 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。

color: "auto", // 文字的颜色,默认 auto。

fontSize: 30, // 文字的字体大小,默认 15。

formatter: "{value}%", // 格式化函数或者字符串

},

data: data1

}

]

};

echarts 仪表盘 文字位置_echarts仪表盘相关配置相关推荐

  1. echarts 仪表盘 文字位置_ECharts仪表盘样式

    仪表盘截图 Vue仪表盘样式vue代码 总计 Vue仪表盘样式js代码 drawLine(){ // 基于准备好的dom,初始化echarts实例 var option = { // backgrou ...

  2. echarts 仪表盘 文字位置_ECharts 使用series.title.offsetCenter设置仪表盘标题位置

    ECharts 使用series.title.offsetCenter设置仪表盘标题位置 ECharts 使用series.title.offsetCenter设置仪表盘标题位置 1 使用详解 ser ...

  3. echarts 仪表盘 文字位置_企业数据仪表盘设计,该怎样设计自己的BI产品?

    ​现在,很多企业的高层领导喜欢建数据仪表盘或者管理驾驶舱,甚至用巨大无比的显示屏阵列来展示各种关键业务指标KPI,那成功设计一个数据仪表盘需要如何做?又需要注意什么问题呢? 数据仪表盘是数据可视化的一 ...

  4. echarts 仪表盘 文字位置_方法 | 用notion打造个人仪表盘

    摘要:分享一下我是如何用notion打造个人仪表盘.仪表盘主要分六大模块:1.导航链接:2.自我激励:3.知识回顾:4.当前计划:5.习惯+日志:6.总结分享.原文约 1200 字 | 图片 6 张 ...

  5. echarts 仪表盘文本下移_echarts仪表盘设置图文实例

    echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能: 不同段的颜色是通过axisLine->lineS ...

  6. echarts grid的样式位置_ECharts grid组件配置 提示框浮层的位置

    Function 回调函数,格式如下:(point: Array, params: Object|Array., dom: HTMLDomElement, rect: Object, size: Ob ...

  7. echarts label固定位置_ECharts+百度地图网络拓扑应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  8. echarts中toolbox位置_ECharts工具栏组件(toolbox)

    toolbox 在 ECharts 图表的工具栏(toolbox)中,有五个内置的工具,分别是:导出图片,数据视图,动态类型切换,数据区域缩放以及配置项还原,这五个工具的配置在 feature 属性中 ...

  9. 简单聊聊Echarts伪3D地图实现的相关配置

    知识和技能真的是用进废退,还是得多实践,才不至于遗忘. 目录 前言 二.实现原理 三.从0开始实现 1.目录结构 2.地图JSON数据获取 3.具体实现,重头戏 3.一些常见问题的解决方法 总结 前言 ...

最新文章

  1. JS监听手机物理返回键,返回到指定页面
  2. 心得体悟帖---13、编程和学习同时进行
  3. malloc 不能返回动态内存
  4. redis特点单进程单线程高性能服务器,Redis为什么是单线程?Redis又为什么这么快!...
  5. DCN RepPoints解读
  6. 03.elasticsearch_index操作
  7. 我的RSS我做主:My RSS
  8. r语言中的shiny教程_如何使用Shiny在R中编写Web应用程序
  9. Access数据库列名的命名规则
  10. 如何用iMazing Profile Editor编辑配置文件
  11. Uniapp 移动端调用摄像头扫描二维码或者条形码
  12. Postman的安装
  13. NoSQLBooster for MongoDB的下载,安装,连接数据库,查询
  14. 车规电阻AEC-Q200测试项目及元器件检测设备
  15. c语言 double **x,C语言题目 若已定义x和y为double类型,则表达式“x=1,y=x+3/2的值是:...
  16. Linux: vi 编辑器
  17. 隐私计算头条周刊(12.4-12.10)
  18. 安卓10 来电流程梳理
  19. 监听元素宽高变化resize
  20. 三相同步电机怎么接线图_三相变频电机接线图及详细讲解

热门文章

  1. gnome设置dvorak键盘布局
  2. 四川省计算机考试模拟试题,四川省大学生计算机一级考试全真模拟试题
  3. NC开发软件的错误以及改正
  4. kali渗透测试win10
  5. Python-OpenCV中的cv2.inpaint()函数
  6. Ract基础之恰当的获取数据二
  7. 视频转文字如何操作?几种方法带你了解如何视频转文字
  8. stanford cs230 课程笔记
  9. 令夫妻关系和谐的五大秘诀
  10. 钢材规格解读的软件_钢材型号含义讲解