学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~\
如果大家喜欢，可以点赞或留言💕~~，谢谢大家⭐️⭐️⭐️~
1.echars柱状图堆叠图形制作
代码如下：
mychart2() {
myChart2 = echarts.init(document.getElementById('profitTrends'));
var data = {
area: ['2020Q3','2020Q4', '2121Q1', '2121Q2','2121Q3'],
legend: ['重大决策', '重要人事任免', '重大项目安排', '大额度资金运作'],
data: [
[808, 745, 773, 805, 258],
[74, 59, 71, 76, 30],
[152, 99, 69, 111, 36],
[42, 39, 26, 46, 13],
]
}
var colors = ['#02BCD0','#0780EB','#9A86FF','#CA5670']
option = {
color: colors,
legend: {
top:'86%',
left:'25%',
icon:"rect",
selectedMode:false,//取消图例上的点击事件
itemWidth:15,
itemHeight:3,
textStyle: {
color: '#fff',
fontSize: 12,
padding: [0,15,0,5]
},
data: data.legend
},
tooltip: {
transitionDuration: 0,
trigger: 'axis',
axisPointer: {
// type: 'shadow',
type: 'none'
}
},
grid: {
left: '15%',
top: '25%',
right: '8%',
bottom: '38%',
},
xAxis: {
type: 'category',
axisLabel: {
show: true,
interval:0,
rotate:40,
textStyle: {
color:"#ffffff",
fontSize: 12
}
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(12, 87, 169, 1)",
type:"dotted"
},
width: 5
},
axisTick: {
show: false,
},
data: data.area
},
yAxis: {
type: 'value',
interval:200,
axisLabel: {
formatter: '{value}',
color: '#ffffff',
textStyle: {
fontSize: 12,
color: '#ffffff',
}
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(12, 87, 169, 1)"
},
width: 5
},
axisTick: {
show: false,
},
splitLine: {
show:true,
lineStyle:{
color:'rgba(12, 79, 129, 1)',
type:"dotted"
}
},
},
series: []
};
for (var i = 0; i < data.legend.length; i++) {
option.series.push({
name: data.legend[i],
type: 'bar',
stack: '总量',
barWidth: '25',
label: {
show: false,
position: 'insideRight'
},
data: data.data[i]
})
}
myChart2.setOption(option);
}2.echars 环形图百分比
代码如下：(角度需要自己计算，如果是百分百的圆就不需要averagenum,直接写值就可以了)
function mychart3() {
var averagenum=50.22；
myChart3=echarts.init(document.getElementById('profitIncome'));
option = {
var pass_rate = 70,average = averagenum*0.7,total = 100; // 360*70%=252度数 252/360=0.7
let option = {
series: [
{
name:'通过率'+pass_rate+'%',
type:'pie',
radius: ['52%', '54%'],
//禁止鼠标悬停放大
hoverAnimation: false,
silent: true,
//环的位置
label: {
show: false,
position: 'center',
},
labelLine: {
normal: {
show: false
}
},
data:[
{
value:pass_rate, //需要显示的数据
// name: '通过率'+pass_rate+'%',
itemStyle: {
normal: {
color:'#008AD4',
}
}
},
{
value:total-pass_rate,
//不需要显示的数据，颜色设置成和背景一样
itemStyle: {
normal: {
color: 'transparent'
}
}
}
]
},
{
name:'平均值'+average+'%',
type:'pie',
// roundCap: true,
radius: ['48%', '52%'],
hoverAnimation: false,
silent: true,
label: {
show: false,
position: 'center',
},
labelLine: {
normal: {
show: false
}
},
data:[
{
// name:'平均值'+average+'%',
value:average,
itemStyle: {
normal: {
color: {
// 完成的圆环的颜色
colorStops: [
{
offset: 0,
color: "#2449F3" // 0% 处的颜色
},
{
offset: 1,
color: "#7493F8" // 100% 处的颜色
}
]
},
}
}
},
{
value:total-average,
itemStyle: {
normal: {
color: 'transparent'
}
}
}
],
},
]
};
}
myChart3.setOption(option);
}3.echarts 柱形图
代码如下：
function mychart3() {
myChart3 = echarts.init(document.getElementById('profitIncome'));
var xData = ["境内", "境外"]
var line = ["2942", "1834"];
var attr ={
'name':'月平均单价',
'unit':'元/单'
}
var max =Math.max.apply(null,line);
var maxnum=max+1000;
// console.log(maxnum)
var colors = []
option = {
// tooltip: {
// trigger: 'item',
// padding: 1,
// formatter: function(param) {
// var resultTooltip =
// "<div style='background:rgba(13,5,30,.6);border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" +
// "<div style='text-align:center;'>" + param.name + "</div>" +
// "<div style='padding-top:5px;'>"+
// "<span style=''> " +attr.name + ": </span>" +
// "<span style=''>" + param.value + "</span><span>" + attr.unit + "</span>"+
// "</div>" +
// "</div>";
// return resultTooltip
// }
// },
grid: {
left: '15%',
top: '20%',
right: '8%',
bottom: '25%',
},
legend: {
show: true,
icon: 'circle',
orient: 'horizontal',
top: '90.5%',
right: 'center',
itemWidth: 16.5,
itemHeight: 6,
// itemGap: 30,
textStyle: {
// color: '#FFFFFF'
color: '#C9C8CD',
fontSize: 14
}
},
xAxis: [{
// show:false,
data: ["境内", "境外"],
triggerEvent:true,//设置坐标点击事件
axisLabel: {
color: '#77C8FF',
fontSize: 12,
height:40,
lineHeight:40
},
axisLine: {
show: false //不显示x轴
},
axisTick: {
show: false //不显示刻度
},
boundaryGap: true,
splitLine: {
show: false,
width: 0.08,
lineStyle: {
type: "solid",
color: "#03202E"
}
}
}],
yAxis: [{
// max: maxnum,
splitLine: {
show: true,
lineStyle: {
color: '#0C57A9',
type: 'dotted'
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle:{
color:"#2A6FDA",
type:"dotted",
width:'2'
}
},
axisLabel: {
color: '#4F88BD',
fontSize: 12,
textStyle: {
// color: '#888'
},
},
}],
series: [
{//柱底圆片
name: "",
type: "pictorialBar",
symbolSize: [46, 10],//调整截面形状
symbolOffset: [0, 5],
z: 12,
itemStyle: {
normal: {
color: function(params){
var a = params.name.slice(0,2);
if(a === '境内'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(21, 106, 199, 0.4)"
},{
offset: 1,
color: "rgba(55, 130, 211, .5)"
}], false)
}else if(a === '境外'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 203, 159, 0)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(0, 203, 159, 0.7)'// 100% 处的颜色
}], false)
}
},
label:{
show:true,
position:'top',
padding:[0,0,5,0],
backgroundColor:"transparent",
color:"#77C8FF"
},
},
},
data: line
},
//柱体
{
name: '',
type: 'bar',
barWidth: 46,
barGap: '0%',
itemStyle: {
normal: {
color: function(params){
var a = params.name.slice(0,2);
if(a === '境内'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(33, 109, 196, 1)"
},{
offset: 1,
color: "rgba(29, 95, 176, 0.3)"
}], false)
}else if(a === '境外'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 203, 159, 1)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(0, 203, 159, 0.3)' // 100% 处的颜色
}], false)
}
},
}
},
data: line
},
//柱顶圆片
{
name: "",
type: "pictorialBar",
symbolSize: [46, 10],//调整截面形状
symbolOffset: [0, -5],
z: 12,
symbolPosition: "end",
itemStyle: {
normal: {
color: function(params){
var a = params.name.slice(0,2);
if(a === '境内'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(21, 106, 199, 0.4)"
},{
offset: 1,
color: "rgba(55, 130, 211, .5)"
}], false)
}else if(a === '境外'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 203, 159, 0.4)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(0, 203, 159, 0)' // 100% 处的颜色
}], false)
}
},
}
},
data: line
}
]
};
myChart3.setOption(option);
}4.echars横向柱形图
代码如下：
function mychart2() {
myChart2 = echarts.init(document.getElementById('profitTrends'));
// 指定图表的配置项和数据
var data = [193,343,343,223,223,343,223,223]
var list=['其它专项','股权','信息化','科技','修理','技改','基建','前期']
var barWidth = 10;
option = {
grid: {
left: '15%',
top: '15%',
right: '8%',
bottom: '15%',
},
xAxis: {
show: false,
splitLine: {
show: false,
},
},
yAxis: {
data: list,
splitLine: {
show: false,
},
axisLabel: {
textStyle: { fontSize: '80%', color: '#FFFFFF' },
},
axisLine: {
show: true,//显示纵坐标
lineStyle:{
color:"#153F77",
width:'3',
type:'solid'
}
},
axisTick: false,
},
series: [
{
type: 'pictorialBar',
type: 'bar',
barWidth:barWidth,
zlevel: 2,
data: data,
itemStyle:{
normal:{
barBorderRadius: [0, 100, 0 ,0],
color:function(params){//渐变色
var colorList = [
['rgba(8, 41, 88, 1)', 'rgba(1, 176, 147, 1)'],
['rgba(13, 35, 65, 1)', 'rgba(42, 125, 249, 1)'],
['rgba(8, 41, 88, 1)', 'rgba(1, 176, 147, 1)'],
['rgba(13, 35, 65, 1)', 'rgba(42, 125, 249, 1)'],
['rgba(8, 41, 88, 1)', 'rgba(1, 176, 147, 1)'],
['rgba(13, 35, 65, 1)', 'rgba(42, 125, 249, 1)'],
['rgba(8, 41, 88, 1)', 'rgba(1, 176, 147, 1)'],
['rgba(13, 35, 65, 1)', 'rgba(42, 125, 249, 1)'],
];
var index=params.dataIndex;
if(params.dataIndex>=colorList.length){
index=params.dataIndex-colorList.length;
}
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: colorList[index][0]
},
{
offset: 1,
color: colorList[index][1]
}
]);
},
label:{
show:true,
position:'right',
formatter:function(params){//设置柱状图上文本的颜色不同
// console.log(params.dataIndex)
if(params.dataIndex %2==0){
return '{a|'+ data[params.dataIndex]+'}'
}else{
return '{b|'+ data[params.dataIndex]+'}'
}
},
rich:{
a:{
color:"#03A88E"
},
b:{
color:"#2B8FFF"
},
}
},
}
},
// yAxisIndex:0,
},
{
name:"框",
type:'bar',
barGap: '-100%',//让边框和柱子在同一个位置
barWidth:barWidth,
// barCategoryGap:20,
zlevel: 2,
data: data,
itemStyle:{
//颜色
color:"none",
//边框色
borderColor:"#00C1DE",
//border宽度
borderWidth:1,
//border的边角弧度
barBorderRadius: [0, 100, 0 ,0],
// padding:[2,2,2,2],
}
// yAxisIndex:1,
}
]
};
myChart2.setOption(option);
}5.echars 柱形图里边带小方格
代码如下：
function mychart4(){
mychart4 = echarts.init(document.getElementById('profitRate'));
let colors = [{
one: "#67E0E3",
two: "#0181DE",
}, {
one: "#9336FF",
two: "#146AFF",
}, {
one: "#082757",
two: "#02B093",
}];
let echartData = [{
name: "金融",
value: 1300,
},
{
name: "科技环保",
value: 2200,
},
{
name: "化工",
value: 3900,
},
{
name: "运输",
value: 1800,
},
{
name: "水电",
value: 6289,
},
{
name: "新能源",
value: 8288,
},
{
name: "火电",
value: 3100,
},
{
name: "煤炭",
value: 2021,
},
];
let xAxisData = echartData.map(v => v.name);
let yAxisData = echartData.map(v => v.value);
option = {
grid: {
left: '15%',
top: '20%',
right: '8%',
bottom: '25%',
},
xAxis: {
type: 'category',
data: xAxisData,
triggerEvent:true,//设置坐标点击事件
axisLine: {
show: false
},
axisLabel: {
color: "#81ACCF",
fontSize: '80%',
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
// max:100,
axisLine: {
show: true,
lineStyle: {
color: "#0C4F81"
}
},
nameTextStyle: {
color: '#81ACCF',
fontSize: '60%',
},
axisLabel: {
color: "#4F88BD",
fontSize: '60%',
formatter: '{value}'
},
splitLine: {
lineStyle: {
type: "dotted",
color: "#0C4F81"
}
}
},
series: [
{
name:'集团各板块资产负债率',
type: 'bar', //设置类型为象形柱状图
barWidth: '18', //柱图宽度
itemStyle: {
normal: {
color: function (params) {
let odd = params.dataIndex % 2;
return {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: colors[odd].one // 0% 处的颜色
},
{
offset: 1,
color: colors[odd].two // 100% 处的颜色
}
]
}
},
label:{
show:true,
position:'top',
formatter:function(params){//设置柱状图上文本的颜色不同
// console.log(params.dataIndex)
if(params.dataIndex %2==0){
return '{a|'+ yAxisData[params.dataIndex]+'}'
}else{
return '{b|'+ yAxisData[params.dataIndex]+'}'
}
},
rich:{
a:{
color:"#0EFCFF"
},
b:{
color:"#6947FF"
},
}
}
},
},
z: 10,
zlevel: 0,
data: yAxisData,
},
{
type: 'pictorialBar', //设置类型为象形柱状图
symbol: 'rect', //图形类型，带圆角的矩形
symbolMargin: '2', //图形垂直间隔
symbolRepeat: true, //图形是否重复
// 分隔
itemStyle: {
normal: {
color: '#0F375F'
}
},
symbolRepeat: 'fixed',
symbolClip: true,
symbolSize: [18, 2],
symbolPosition: 'start',
symbolOffset: [0, -1],
// symbolBoundingData: this.total,
width: "100%",
z: 0,
zlevel: 1,
data: yAxisData,
}
]
};
mychart4.setOption(option);
}6.echars 三角形图表
代码如下：
function mychart3() {
myChart3 = echarts.init(document.getElementById('profitIncome'));
let echartData = [{
name: "境内",
value: 4100,
},
{
name: "境外",
value: 2990,
}];
let xAxisData = echartData.map(v => v.name);
let yAxisData = echartData.map(v => v.value);
option = {
grid: {
left: '15%',
top: '20%',
right: '8%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: xAxisData,
triggerEvent:true,//设置坐标点击事件
axisTick: {show: false},
axisLine: {
show: false,
},
axisLabel: {
color: "#81ACCF",
fontSize: '80%',
},
},
yAxis: {
nameTextStyle:{
color:'#81ACCF',
fontSize:'60%',
},
splitLine: {
show: true,
lineStyle: {
type: "dotted",
color: "#0C4F81"
}
},
axisLabel: {
color: "#4F88BD",
fontSize: '60%',
formatter: '{value}'
},
axisLine: { //改变坐标轴的颜色
show: true,//显示纵坐标
lineStyle: {
color: "#0C4F81"
},
},
},
color: ['#307fd0'],
series: [{
name: 'hill',
type: 'pictorialBar',
//位置偏移,距离0刻度的位置
barCategoryGap: '80%',
//图形宽度
barWidth:50,
//图形形状
symbol: 'path://M150 50 L130 130 L170 130 Z',
itemStyle: {
normal: {
color: function(params){
var a = params.name.slice(0,2);
if(a === '境内'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(43, 128, 255, 1)"
},{
offset: 1,
color: "rgba(8, 33, 73, 1)"
}], false)
}else if(a === '境外'){
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(2, 176, 147, 1)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(8, 39, 87, 1)'// 100% 处的颜色
}], false)
}
},
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
// color: '#77C8FF',
fontSize: '60%'
},
formatter:function(params){//设置柱状图上文本的颜色不同
// console.log(params.dataIndex)
if(params.dataIndex %2==0){
return '{a|'+ yAxisData[params.dataIndex]+'}'
}else{
return '{b|'+ yAxisData[params.dataIndex]+'}'
}
},
rich:{
a:{
color:"#2B8FFF"
},
b:{
color:"#03A88E"
},
}
},
},
},
data: yAxisData,
z: 10
}, {
name: 'glyph',
type: 'pictorialBar',
barGap: '0%',
symbolPosition: 'end',
symbolSize: 50,
symbolOffset: [0, '-120%']
}]
};
myChart3.setOption(option);
}7.echars 环形图加外边框
代码如下：
function mychart1() {
myChart1 = echarts.init(document.getElementById('profitTotal'));
let echartData = [{
name: '费用',
value: 30,
},
{
name: '投资',
value: 70,
},];
let xAxisData = echartData.map(v => v.name);
let yAxisData = echartData.map(v => v.value);
option = {
color:['#03A08C','#1D6CDC'],
legend: {
orient: 'vertical', // 'vertical' ,'horizontal'
x: 'right', // 'center' | 'left' | 'right' | {number},
y: 'center', // 'center' | 'bottom' | {number}
padding:[0,80,0,0],
align:'left',
textStyle: { //图例文字的样式
color: '#81ACCF',
fontSize: 14,
fontWeight: '100',
},
// icon: "rect", // 字段控制形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 18, // 设置宽度
itemHeight: 10, // 设置高度
// itemGap: 40, // 设置间距
selectedMode:false,//取消图例上的点击事件
data:xAxisData,
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['25%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#0A284C',
borderWidth: 2,
},
label: {
normal: {
position: 'inner',
show : false,
formatter:'{c}%'
},
},
labelLine: {
normal: {
show: false
}
},
data:echartData,
},
{
name: '外边框',
type: 'pie',
radius: ['25%', '80%'],
avoidLabelOverlap: false,
itemStyle: {
normal:{
color:function(params){//渐变色
var colorList = ['rgba(3, 160, 140, 0.2)','rgba(3, 105, 211, 0.2)'];
return colorList[params.dataIndex]
},
// color:'rgba(62,109,255,0.4)',
borderColor: '#0A284C',
borderWidth: 2,
},
},
label: {
normal: {
position: 'inner',
show : true,
color:'#ffffff',
formatter:'{c}%'
},
},
labelLine: {
normal: {
show: false
}
},
data:echartData,
}]
};
myChart1.on('mouseover', 'series.pie',function(params) {
myChart1.dispatchAction({
type: 'highlight',
dataIndex: params.dataIndex,
seriesIndex: 0,
});
});
myChart1.on('mouseout', 'series.pie', function(params) {
myChart1.dispatchAction({
type: 'downplay',
dataIndex: params.dataIndex,
seriesIndex: 0,
});
});
myChart1.setOption(option);
}更新~ ~ ~
8.echars 渐变环形图百分比
代码如下：
<div style="width: 48%;" ref="jdzlkz_echars"></div>
mychart() {
var mychart = echarts.init(this.$refs.jdzlkz_echars);
var dataStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 0,
shadowColor: '#203665'
}
};
var data = [
{
name: '抽检合格率',
value: 90
}
]
option = {
// backgroundColor: "#20263f",
series: [{
name: '第一个圆环',
type: 'pie',
clockWise: false,
radius: [60, 70],
itemStyle: dataStyle,
hoverAnimation: false,
center: ['50%', '50%'],
data: [
{
value: data[0].value,
label: {
normal: {
rich: {
a: {
color: '#42A2F8',
align: 'center',
fontSize: 20,
fontWeight: "bold"
},
b: {
color: '#3CA0FF',
align: 'center',
fontSize: 16
}
},
formatter: function(params){
console.log(params)
// return "{a|"+params.value+"%}"+"\n\n{b|抽检合格率}";
return "{a|"+params.value+"%}"+"\n\n{b|"+data[0].name+"}";
},
position: 'center',
show: true,
textStyle: {
fontSize: '14',
fontWeight: 'normal',
color: '#fff'
}
}
},
itemStyle: {
normal: {
// color: '#2c6cc4',
// shadowColor: '#2c6cc4',
// color: '#FFD52D',
color:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(255, 213, 45, 1)'
}, {
offset: 1,
color: 'rgba(60, 160, 255, 1)'
}]),
shadowColor: '#FFD52D',
shadowBlur: 0
}
}
}, {
value: 100 - data[0].value,
name: 'invisible',
itemStyle: {
normal: {
// color: '#3CA0FF'
color: '#E1E8EE'
},
emphasis: {
// color: '#3CA0FF'
color: '#E1E8EE'
}
}
}
]
}]
}
mychart.clear();
mychart.setOption(option);
window.addEventListener("resize", function () {
mychart.resize();
});
},9.echars 环形图百分比带指针仪表盘效果
代码如下：
<div id="aqglpie" style="width: 100%;height: 55%;"></div>
mychart() {
var chartDom = document.getElementById('aqglpie');
var mychart = echarts.init(chartDom);
var placeHolderStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: "rgba(0,0,0,0)",
borderWidth: 0
},
emphasis: {
color: "rgba(0,0,0,0)",
borderWidth: 0
}
};
var dataStyle = {
normal: {
formatter: '{c}%',
position: 'center',
show: true,
textStyle: {
fontSize: '15',
fontWeight: 'normal',
color: '#34374E'
}
}
};
option = {
// backgroundColor: '#fff',
title: [{
text: '安全大检查',
left: '20%',
top: '70%',
textAlign: 'center',
textStyle: {
fontWeight: 'normal',
fontSize: '16',
color: '#333333',
textAlign: 'center',
},
}, {
text: '专项检查',
left: '50%',
top: '70%',
textAlign: 'center',
textStyle: {
color: '#333333',
fontWeight: 'normal',
fontSize: '16',
textAlign: 'center',
},
}, {
text: '重大安全隐患',
left: '80%',
top: '70%',
textAlign: 'center',
textStyle: {
color: '#333333',
fontWeight: 'normal',
fontSize: '16',
textAlign: 'center',
},
}],
//第一个图表
series: [
{
type: 'pie',//底圆
hoverAnimation: false, //鼠标经过的特效
// radius: ['25%', '30%'],
radius: ['35%', '40%'],
center: ['20%', '50%'],
startAngle: 225,
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
position: 'center'
}
},
data: [{
value: 100,
itemStyle: {
normal: {
color: '#E1E8EE'
}
},
}, {
value: 35,
itemStyle: placeHolderStyle,
},
]
},
//上层环形配置
{
type: 'pie',
hoverAnimation: false, //鼠标经过的特效
radius: ['35%', '40%'],
center: ['20%', '50%'],
startAngle: 225,
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
position: 'center'
}
},
data: [{
value: 85,//值
itemStyle: {
normal: {
// color: '#54DA99',
color:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(15, 220, 120, 1)'
}, {
offset: 1,
color: 'rgba(84, 218, 153, 1)'
}]),
}
},
label: dataStyle,
}, {
value: 35,
itemStyle: placeHolderStyle,
},
]
},
// 外层
{
type: 'gauge',//外层光
radius: '50%',
// center: ['center', 'center'],
center: ['20%', '50%'],
min: 0,
max: 100,
splitNumber: 6, //刻度数量
startAngle: 220,
endAngle: -40,
axisLine: {
// 坐标轴线
show: false,
lineStyle: {
// 属性lineStyle控制线条样式
width: 0,
// shadowColor: '#67FFFC',
shadowBlur: 2,
// color: [
// [0, '#FF8F8F '],
// [0.8, ' #FF8F8F'],
// // [0.9, ' #FF8F8F'],
// ],
color: [
[0, '#54DA99'],
[0.8, ' #54DA99'],
// [0.9, ' #FF8F8F'],
],
},
},
axisTick: {
// 坐标轴小标记
length: 4, // 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: 'auto',
width: 1,
},
},
axisLabel: {
show: false,
},
splitLine: {
// 分隔线
length: -5,
lineStyle: {
color: 'auto',
width: 1,
},
},
title: {
textStyle: {
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic',
},
},
// 指针
pointer: {
show: false,
length: '70%',
width: '4%',
},
detail: {
show: false,
},
},
//第二个图表
{
type: 'pie',
hoverAnimation: false,
radius: ['35%', '40%'],
center: ['50%', '50%'],
startAngle: 225,
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
position: 'center'
}
},
data: [{
value: 100,
itemStyle: {
normal: {
color: '#E1E8EE'
}
},
}, {
value: 35,
itemStyle: placeHolderStyle,
},
]
},
//上层环形配置
{
type: 'pie',
hoverAnimation: false,
radius: ['35%', '40%'],
center: ['50%', '50%'],
startAngle: 225,
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
position: 'center'
}
},
data: [{
value: 30,
itemStyle: {
normal: {
// color: '#8B9FE5',
color:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(139, 159, 229, 1)'
}, {
offset: 1,
color: 'rgba(160, 195, 232, 1)'
}]),
}
},
label: dataStyle,
}, {
value: 55,
itemStyle: placeHolderStyle,
},
]
},
// 外层
{
type: 'gauge',//外层光
radius: '50%',
center: ['50%', '50%'],
min: 0,
max: 100,
splitNumber: 6, //刻度数量
startAngle: 220,
endAngle: -40,
axisLine: {
// 坐标轴线
show: false,
lineStyle: {
// 属性lineStyle控制线条样式
width: 0,
// shadowColor: '#67FFFC',
shadowBlur: 2,
color: [
[0, '#A0C3E8 '],
[0.8, ' #A0C3E8'],
// [0.9, ' #FF8F8F'],
],
},
},
axisTick: {
// 坐标轴小标记
length: 4, // 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: 'auto',
width: 1,
},
},
axisLabel: {
show: false,
},
splitLine: {
// 分隔线
length: -5,
lineStyle: {
color: 'auto',
width: 1,
},
},
title: {
textStyle: {
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic',
},
},
// 指针
pointer: {
show: false,
length: '70%',
width: '4%',
},
detail: {
show: false,
},
},
//第三个图表
{
type: 'pie',
hoverAnimation: false,
radius: ['35%', '40%'],
center: ['80%', '50%'],
startAngle: 225,
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
position: 'center'
}
},
data: [{
value: 100,
itemStyle: {
normal: {
color: '#E1E8EE'
}
},
}, {
value: 35,
itemStyle: placeHolderStyle,
},
]
},
//上层环形配置
{
type: 'pie',
hoverAnimation: false,
radius: ['35%', '40%'],
center: ['80%', '50%'],
startAngle: 225,
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
position: 'center'
}
},
data: [{
value: 30,
itemStyle: {
normal: {
// color: '#FF918D',
color:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(255, 145, 141, 1)'
}, {
offset: 1,
color: 'rgba(255, 139, 145, 1)'
}]),
}
},
label: dataStyle,
}, {
value: 55,
itemStyle: placeHolderStyle,
},
]
},
// 外层
{
type: 'gauge',//外层光
radius: '50%',
center: ['80%', '50%'],
min: 0,
max: 100,
splitNumber: 6, //刻度数量
startAngle: 220,
endAngle: -40,
axisLine: {
// 坐标轴线
show: false,
lineStyle: {
// 属性lineStyle控制线条样式
width: 0,
// shadowColor: '#67FFFC',
shadowBlur: 2,
color: [
[0, '#FF8B91 '],
[0.8, ' #FF8B91'],
// [0.9, ' #FF8F8F'],
],
},
},
axisTick: {
// 坐标轴小标记
length: 4, // 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: 'auto',
width: 1,
},
},
axisLabel: {
show: false,
},
splitLine: {
// 分隔线
length: -5,
lineStyle: {
color: 'auto',
width: 1,
},
},
title: {
textStyle: {
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic',
},
},
// 指针
pointer: {
show: false,
length: '70%',
width: '4%',
},
detail: {
show: false,
},
},
]
};
mychart.clear();
mychart.setOption(option);
window.addEventListener("resize", function () {
mychart.resize();
});
},后续有再遇到其他的会持续更新记录😊~~~
