echarts demo
initChart() {
let chartDom = document.getElementById("chartId");
let myChart = echarts.init(chartDom);
let option = {
tooltip: {},
color: ["#f60", "#c5e"],
xAxis: {
type: "category",
axisLabel: {
interval: 0,
rotate: 16,
color(v, i) {
return i > 3? '#F60': '#666'
}
},
axisTick: {
show: false,
},
data: [
"A公司",
"B公司",
"C公司",
"D公司",
"E公司",
"F公司",
"G公司",
],
},
yAxis: {
axisTick: {
show: false,
},
},
legend: {
origin: "vertical",
top: "bottom",
data: ["未完成", "已完成"],
},
series: [
{
name: "未完成",
data: [45, 55, 66, 21, 32],
type: "bar",
barWidth: "20%",
},
{
name: "已完成",
data: [33, 35, 69, 89, 45],
type: "bar",
barWidth: "20%",
},
],
};
myChart.setOption(option);
}
initChart() {
let chartDom = document.getElementById("chartId");
let myChart = echarts.init(chartDom);
let option = {
title: {
text: "{b|81.2%}",
subtext: '{a|81.2%}',
subtextStyle: {
rich: {
a: {
fontSize: '18',
color: 'black'
}
}
},
textStyle: {
rich: {
b: {
fontSize: "18",
},
},
},
left: "center",
top: "center",
},
color: ["#f60", "#666"],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}总额:{c}元 ({d}%)",
},
legend: {
origin: "vertical",
left: "right",
data: ["已完成", "未完成"],
},
series: [
{
name: "业务完成率",
type: "pie",
radius: ["40%", "55%"],
center: ["50%", "50%"],
data: this.c1Data,
label: {
formatter: "{b}总额:{c}元",
rich: {
cv: {
fontSize: 18,
},
},
},
},
],
};
myChart.setOption(option);
},