<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts仪表盘样式设置</title>
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 250px;height: 250px;"></div>
<script>
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
option = {
title : { //标题组件
text: '920',
textStyle:{
color: '#000', //文字颜色
fontStyle: 'normal', //字体风格:'normal','italic','oblique'
fontWeight: 'normal', //字体粗细 :'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontFamily: 'sans-serif',//字体系列: 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
fontSize: 24, //字体大小
},
x:'center',
bottom:0,
},
tooltip: {
formatter: "{a} <br/>{b} : {c}%",
},
series: [
{
type: 'gauge',
name: '数据指标',
radius: '100%', //仪表盘半径,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值
axisLine: { //仪表盘轴线相关配置
show:true,
lineStyle: {
color: [ //仪表盘背景颜色渐变
[1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0.1,
color: "#fd2100"
},
{
offset: 0.6,
color: "#d09f00"
},
{
offset: 1,
color: "#26fd00"
}
])
]
],
width:20, //轴线宽度
},
},
splitLine: { //分隔线样式。
show: false,
interval:0, //默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。
lineStyle:{ //分割线样式
}
},
axisLabel: { // 刻度标签
show:true,
color: '#000',
fontSize:10, //改变仪表盘内刻度数字的大小
shadowColor : '#000', //默认透明
},
title: { //仪表盘标题。
show: true, //是否显示标题,默认 true。
offsetCenter: [0,"60%"],//相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
color: '#000',
fontWeight: '100',
fontSize: '18',
},
detail: { // 仪表盘详情,用于显示数据。
show: true, // 是否显示详情,默认 true。
offsetCenter: [0,"35%"],// 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
color: '#000',
fontWeight: '700',
fontSize: '20',
formatter: "{value}%", // 格式化函数或者字符串
},
data: [{ value: 92, name: '指标' }],
markPoint:{ //图表标注
symbol:'circle', //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
symbolSize:5,
data:[
//跟你的仪表盘的中心位置对应上,颜色可以和画板底色一样
{x:'center',y:'center',itemStyle:{color:'#FFF'}}
]
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option, true);
</script>
</body>
</html>