echart仪表盘旋转_使用echarts绘制漂亮的渐变键盘仪表盘

echarts官方示例和默认样式都比较难看，经过一顿捣鼓实现比较漂亮的渐变仪表盘。

第一步：设置轴线

将图表轴线、label、分割线、隐藏，只保留刻度，然后修改刻度样式达到最终效果。不过要注意的是axisLine不能简单的设置show:false，还要设置opacity才能彻底隐藏底色。看看效果和代码如下：

series: [

{

type: 'gauge',

radius: '90%',

axisLine: {

show: false,

lineStyle: {

width: 3,

opacity: 0

}

title: { show: false },

detail: { show: false },

splitLine: { show: false },

axisTick: {

length: 20,

splitNumber: 7,

lineStyle: {

color: '#52B8DF',

width: 3

}

axisLabel: { show: false },

pointer: { show: false },

itemStyle: {},

data: [

{

value: 20,

name: 'test gauge'

}

]

}

]

第一步效果

第二步：设置背景

因为这是个弧形的渐变，所以echarts自带的球形和线形渐变填充都不符合，只能在PS中绘制一个如下图正方形的渐变背景，将图片作为背景颜色填充到刻度上。

Photoshop绘背景

echarts的背景图片必须是一个dom节点，而不是图片的url。所以先需要引入图片到HTML文档上。然后 display:none 将其隐藏。

刻度线配置：

axisTick: {

length: 20,

splitNumber: 7,

lin

echart仪表盘旋转_使用echarts绘制漂亮的渐变键盘仪表盘相关推荐

hdc mfc 画扇形图_使用echarts绘制条形图和扇形图
使用echarts绘制条形图和扇形图简单举例说明下echarts如何绘制条形图和扇形图代码示例 echarts绘制条形图和扇形图 var mychart1=echarts.init(documen ...
echart仪表盘旋转_使用echart仪表盘
温度仪表盘 window.οnlοad=function(){varmyChart=echarts.init(document.getElementById('temperature')); opti ...
echart 时间滚动_基于 ECharts 封装甘特图并实现自动滚屏
项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件 ...
python 仪表盘实现_使用python绘制一个仪表盘显示
使用Python绘制一个看起来比较高大上的仪表盘显示数据,让我们做出来的表格更加美观. 工具/原料电脑 pycharm 方法/步骤 1 打开我们的Python编辑器,首先我们需要添加用到的包文件,如 ...
echarts 3d地图_用Echarts绘制地图-绘制省级地图
公司有一个大数据平台的需求,图表什么的都还好实现.主要就是当中的地图效果我没有做过所以耗费了我一些时间去查资料,万幸还是实现出来了,当然只是一个特别基础的图层没有散点没有下钻,但后面会逐步写出来,所以 ...
echaer 地图_用echarts绘制中国地图
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
python渐变颜色表_使用Python绘制颜色条渐变图+修改比例大小+修改渐变颜色,画,colorbar,刻度...
Draw Gradient Color Map using python Dependencies pandas matplotlib numpy seaborn You can configure ...
堆叠柱形图上自定义数字_用Excel绘制Cell上的漂亮配图
解螺旋公众号·陪伴你科研的第2144天 Excel进行配色提取,绘制Cell都在用的南丁格尔玫瑰图.GO富集图等! 一位审稿人曾经说:"我看稿件的顺序是题目.摘要.图表.前言.参考文献和正文 ...
python阶梯图_不会你还不懂怎么用Python制图吧？师兄教你如何学会绘制漂亮的阶梯图...
Python制图你真的会吗?一文学会如何绘制漂亮的阶梯图说到Python制图就不得不提matplotlib这个最为常用的库,matplotlib库作为Python经典的二维绘图库,在Python的数 ...

echart仪表盘旋转_使用echarts绘制漂亮的渐变键盘仪表盘

echart仪表盘旋转_使用echarts绘制漂亮的渐变键盘仪表盘相关推荐

最新文章

热门文章