2020-04-10 11:41发布
首先仪表100%为灰色,所占的百分比为另一种颜色
formatter: '{b}\n{c}%',
backgroundColor: '#ccc',
1.下载并引入echarts
npm install echarts --save
在需要的使用echarts的js文件中引入
import echarts from 'echarts'
2.获取dom元素,创建option
let ginsengGauge = echarts.init(document.getElementById('ginsengGauge')) let option ={ tooltip: { formatter: '{a} {b} : {c}%' }, series: [ { type: 'gauge', //类型:仪表盘图 name: '制造业', title: { offsetCenter: [0, '120%'], //系列标题文字(效果图中的“制造业”)的位置,第一个为横坐标,第二个为纵坐标 color: "#fff", //字体颜色 fontSize: 16, }, center: ['15%', '45%'], //仪表盘图的中心点相对于dom容器的位置 detail: { //设置效果图中文字“30.25%”的相关配置 formatter: '{value}%', offsetCenter: [0, 0], color: "#FFF", fontSize: 18 }, data: [{ value: 30.25, //此处要改数据 name: '制造业' }], radius: '50%', //环形的大小 clockwise: true, axisLine: { show: true, lineStyle: { color: [ [0.3025, '#1A8FC5'], //占总数的30.25%,即value/100,颜色为'#1A8FC5' [1, '#E1E8EE'] //基底大圈比例为1,颜色为'#E1E8EE', ], width: 10, //环形的粗细 } }, splitLine: { show: false //不显示分隔线 }, axisTick: { show: false //不显示仪表盘刻度 }, axisLabel: { show: false }, pointer: { show: false //不显示仪表盘指针 }, }, ] }
[removed][removed]
[removed]
//仪表图
//type:"gauge"
//文字
//detail:{formatter:"{value}%"}
//data:[{value:32,name:"完成率"}]
//指针:
var main=document.getElementById("main");
var mychart=echarts.init(main);
var option={
series:[
{
name:"业务指标",
type:"gauge",
detail:{formatter:"{value}%"},//显示文字
data:[
{value:0,name: "完成率"}//指针
]
}
mychart.setOption(option);
//练习:每隔100ms修改数据 到100停
//1.创建变量保存变化数值
var num=0;
//2.创建定时器修改value
var t=setInterval(()=>{
//2.1修改value值
num++;
option.series[0].data[0].value=num;
mychart.setOption(option,true);//更新
//2.2到100停止
if (num>=100){
clearInterval(t)
},1000)
//3.如果到100ms停止
let ginsengGauge = echarts.init(document.getElementById('ginsengGauge'))
let option ={
tooltip: {
formatter: '{a} {b} : {c}%'
},
series: [
type: 'gauge', //类型:仪表盘图
name: '制造业',
title: {
offsetCenter: [0, '120%'], //系列标题文字(效果图中的“制造业”)的位置,第一个为横坐标,第二个为纵坐标
color: "#fff", //字体颜色
fontSize: 16,
center: ['15%', '45%'], //仪表盘图的中心点相对于dom容器的位置
detail: { //设置效果图中文字“30.25%”的相关配置
formatter: '{value}%',
offsetCenter: [0, 0],
color: "#FFF",
fontSize: 18
data: [{
value: 30.25, //此处要改数据
name: '制造业'
}],
radius: '50%', //环形的大小
clockwise: true,
axisLine: {
show: true,
lineStyle: {
color: [
[0.3025, '#1A8FC5'], //占总数的30.25%,即value/100,颜色为'#1A8FC5'
[1, '#E1E8EE'] //基底大圈比例为1,颜色为'#E1E8EE',
],
width: 10, //环形的粗细
splitLine: {
show: false //不显示分隔线
axisTick: {
show: false //不显示仪表盘刻度
axisLabel: {
show: false
pointer: {
show: false //不显示仪表盘指针
最多设置5个标签!
formatter: '{b}\n{c}%',
backgroundColor: '#ccc',
1.下载并引入echarts
npm install echarts --save
在需要的使用echarts的js文件中引入
import echarts from 'echarts'
2.获取dom元素,创建option
[removed][removed]
[removed]
//仪表图
//type:"gauge"
//文字
//detail:{formatter:"{value}%"}
//data:[{value:32,name:"完成率"}]
//指针:
var main=document.getElementById("main");
var mychart=echarts.init(main);
var option={
series:[
{
name:"业务指标",
type:"gauge",
detail:{formatter:"{value}%"},//显示文字
data:[
{value:0,name: "完成率"}//指针
]
}
]
}
mychart.setOption(option);
//练习:每隔100ms修改数据 到100停
//1.创建变量保存变化数值
var num=0;
//2.创建定时器修改value
var t=setInterval(()=>{
//2.1修改value值
num++;
option.series[0].data[0].value=num;
mychart.setOption(option,true);//更新
//2.2到100停止
if (num>=100){
clearInterval(t)
}
},1000)
//3.如果到100ms停止
[removed]
1.下载并引入echarts
npm install echarts --save
在需要的使用echarts的js文件中引入
import echarts from 'echarts'
2.获取dom元素,创建option
let ginsengGauge = echarts.init(document.getElementById('ginsengGauge'))
let option ={
tooltip: {
formatter: '{a}
{b} : {c}%'
},
series: [
{
type: 'gauge', //类型:仪表盘图
name: '制造业',
title: {
offsetCenter: [0, '120%'], //系列标题文字(效果图中的“制造业”)的位置,第一个为横坐标,第二个为纵坐标
color: "#fff", //字体颜色
fontSize: 16,
},
center: ['15%', '45%'], //仪表盘图的中心点相对于dom容器的位置
detail: { //设置效果图中文字“30.25%”的相关配置
formatter: '{value}%',
offsetCenter: [0, 0],
color: "#FFF",
fontSize: 18
},
data: [{
value: 30.25, //此处要改数据
name: '制造业'
}],
radius: '50%', //环形的大小
clockwise: true,
axisLine: {
show: true,
lineStyle: {
color: [
[0.3025, '#1A8FC5'], //占总数的30.25%,即value/100,颜色为'#1A8FC5'
[1, '#E1E8EE'] //基底大圈比例为1,颜色为'#E1E8EE',
],
width: 10, //环形的粗细
}
},
splitLine: {
show: false //不显示分隔线
},
axisTick: {
show: false //不显示仪表盘刻度
},
axisLabel: {
show: false
},
pointer: {
show: false //不显示仪表盘指针
},
},
]
}
相关问题推荐