function creatCharts(title,color,value,name,ele){
this.title=title;
this.color=color;
this.value=value;
this.name=name;
this.ele=ele;
this.initchart();
}
creatCharts.prototype = {
initchart:function(){
var obj=this;
var chart = echarts.init(document.getElementById(obj.ele));
var option = this.optionFun(obj.title, obj.color,obj.value,obj.name);
//常规操作 为echarts对象加载数据
chart.setOption(option);
},
//然后接下来都是一些echarts的一些常规配置
optionFun:function(title,color,value,name){
var option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
toolbox: {
feature: {
}
},
series: [
{
name: '业务指标',
startAngle: 220,
endAngle: -40,
type: 'gauge',
detail: {
formatter: '{value}%',
color: color,
fontSize: 30,
offsetCenter: ['0', '10'],
},
axisLabel:{
show: false,
distance:-60
},
splitNumber: 1,
axisLine: {
show: true
},
splitLine: {
show: false
},
axisTick: {
show: false
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
color: [[value / 100, color], [1, '#ccc']],
width: 15 // 这个是修改宽度的属性
}
},
data: [{value: value, name:name}],
title: {
text:title, // 仪表盘标题。
show: true, // 是否显示标题,默认 true。
offsetCenter: ["0%","-30%"],//相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
color: "#333", // 文字的颜色,默认 #333。
fontSize: 20, // 文字的字体大小,默认 15。
},
}
],
};
//将option返回
return option;
}
}
//调用方式 new creatCharts("","","","',"");
构造函数-一个页面创建多个echart图表
最新推荐文章于 2024-07-03 09:54:11 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)