1.代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>如何用echarts实现颜色渐变半圆形仪表盘</title><style>.alignCenter{text-align:center}.myChartPosition{height:300px;width:300px;margin:0 auto}</style><script  type="text/javascript"  src="static/echarts.min.js"></script>
</head>
<body  class="alignCenter"><button onclick="myHistoryRiskChartInit()">如何用echarts实现颜色渐变半圆形仪表盘</button><div id="myChart1"  class="myChartPosition"  ></div><script type="text/javascript">function myHistoryRiskChartInit(){var myChart=echarts.init(document.getElementById("myChart1"));var option={tooltip: {show: true,trigger: 'item',formatter: "{a}:{b}",position: ['100%', '0%']},series: [{type: "gauge",startAngle: 185,endAngle: -8,clockwise: true,      // 仪表盘刻度是否是顺时针增长,默认 true。min: 0,                    // 最小的数据值,默认 0 。映射到 minAngle。max: 4.1,              // 最大的数据值,默认 100 。映射到 maxAngle。splitNumber: 5,      // 仪表盘刻度的分割段数,默认 10。center: ["50%", "65%"], // 仪表盘位置(圆心坐标)axisLine: {show: true,lineStyle: {width: 15,color: [[0.2, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#57f987'},{offset: 1,color: '#6bd471'}])],[0.4, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#6bd471'},{offset: 1,color: '#6bd471'}])],[0.6, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#6bd471'},{offset: 1,color: '#eb7742'}])],[0.8, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#edb168'},{offset: 1,color: '#d0391c'}])],[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#d0391c'},{offset: 1,color: '#e41608'}])]]},},axisTick: {show: false},axisLabel: {show: false},splitLine: {            // 分隔线样式。show: true,                // 是否显示分隔线,默认 true。length:30,               // 分隔线线长。支持相对半径的百分比,默认 30。lineStyle: {          // 分隔线样式。color: "#fff",               //线的颜色,默认 #eee。opacity: 1,                  //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。width: 5,                  //线度,默认 2。type: "solid",              //线的类型,默认 solid。 此外还有 dashed,dottedshadowBlur: 10,              //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。shadowColor: "#fff",     //阴影颜色。支持的格式同color。}},pointer: {width: "15%",length: '70%',},title: {show: true,offsetCenter: [0, '-130%'],// textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontSize: 20,fontWeight: 'bolder',fontStyle: 'italic',color: 'auto'// }},detail: {show: true},data: [{value: 3, name: '颜色渐变半圆形仪表盘'}]/*  data:indata*/}]};myChart.setOption(option);}</script>
</body>
</html>

2.github完整代码地址：

[link] (https://github.com/mandyzhaoinsightzen/echarts-gauge.git).

3.效果图:

如何用echarts实现颜色渐变半圆形仪表盘相关推荐

echarts柱状图颜色渐变样式
option: {title: {text: ''},color: [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, c ...
eCharts——柱状图中的柱体颜色渐变
柱状图中的柱体颜色渐变详细说明先来看一下柱体颜色渐变的效果以下是实现渐变效果的代码: series: [{data: [18, 16, 8, 10, 5, 24],type: 'bar',show ...
ECharts（三）：柱状图柱体颜色渐变（每个柱体不同渐变色）
前提: 会简单的绘制柱状图主要内容: 渐变的主要使用在https://efe.baidu.com/blog/echarts-3.2.0/中有介绍到: itemStyle: { normal: ...
Echarts饼图实现颜色渐变
linear 实现伪弧形渐变 https://gallery.echartsjs.com/editor.html?c=xB1oW7WWbQ Echarts饼图实现颜色渐变 ...
ECharts的高级使用(主题、调色板、颜色渐变)
目录 1. 主题 1.1 内置的主题 init方法有两个参数,第一个参数代表的是一个dom节点,第二个参数代表你需要使用哪一套主题默认内置了两套主题,light.dark <!DOCTYPE ...
Echarts主题和调色盘以及颜色渐变
默认主题: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
echarts象形柱图整体颜色渐变
@独孤求败12138 象形柱图整体颜色渐变 echarts中的象形柱图颜色渐变只能局部内部渐变,但是我想要实现整体渐变,怎么做呢?经过我大量的搜索和官方文档及API的研究,好像并不提供这一功能,那只能 ...
vue中使用echarts实现地图颜色渐变及自定义浮窗内容
在这篇文章里vue中使用echarts自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客,总结了echarts的一些简单用法.这篇文章,一个是在原来的自定义浮窗内容上实现了地图的颜色渐变,一个是简化 ...
echart 柱状图倒叙、字体设置、颜色渐变的使用
倒叙 inside: true, var option = {color: ['#CFF0FD'],tooltip: {show: true},yAxis: {inverse:true,axis ...

如何用echarts实现颜色渐变半圆形仪表盘

1.代码:

2.github完整代码地址：

3.效果图:

如何用echarts实现颜色渐变半圆形仪表盘相关推荐

最新文章

热门文章