效果圖:
<div style="width: 462px; height: 230px" id="energyRightTopDian"></div>
// 自适應字型大小變化
WidthAdaptive(res) {
var windth = window.innerWidth;
let fontSize = windth / 1920;
return fontSize * res;
},
drawLine() {
// 基于準備好的dom,初始化echarts執行個體
let myChart = this.$echarts.init(
document.getElementById("energyRightTopDian")
);
let option = {
backgroundColor: "transparent",
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
top: "15%",
right: "5%",
left: "10%",
bottom: "10%",
},
xAxis: [
{
type: "category",
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.5)",
},
},
axisLabel: {
margin: 10,
color: "#e2e9ff",
textStyle: {
fontSize: this.WidthAdaptive(10),
},
},
axisTick: {
show: false,
},
},
],
yAxis: [
{
name: "機關:元 ",
nameTextStyle: {
color: "#CCCCCC",
fontSize: this.WidthAdaptive(10),
padding: 5,
},
axisLabel: {
formatter: "{value}",
color: "rgba(255,255,255,.9)",
fontSize: this.WidthAdaptive(10),
},
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "rgba(0,186,255,.6)",
},
},
splitLine: {
lineStyle: {
type: "dashed",
color: "rgba(255,255,255,0.2)",
},
},
},
],
series: [
{
type: "bar",
data: [
680, 580, 697, 753, 595, 626, 472, 680, 580, 697, 753, 595, 626,
],
barWidth: "4px",
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(16,210,172,1)", // 0% 處的顔色
},
{
offset: 1,
color: "rgba(16,210,172,0.1)", // 100% 處的顔色
},
],
false
),
shadowColor: "rgba(0,160,221,1)",
shadowBlur: 4,
},
},
label: {
normal: {
show: true,
lineHeight: 30,
formatter: "¥{c}",
position: "top",
textStyle: {
color: "rgba(255,255,255,.9)",
fontSize: this.WidthAdaptive(10),
},
},
},
},
],
};
window.onresize = function () {
myChart.resize();
};
myChart.setOption(option);
},