1. 程式人生 > 其它 >echarts-折線圖-帶陰影

echarts-折線圖-帶陰影

效果圖:

  <div style="width: 462px; height: 220px" id="zhexiantu"></div>
// 自適應字型大小變化
    WidthAdaptive(res) {
      var windth = window.innerWidth;
      let fontSize = windth / 1920;
      return fontSize * res;
    },
    drawLine() {
      // 基於準備好的dom,初始化echarts例項
      let myChart = this
.$echarts.init(document.getElementById("zhexiantu")); let option = { backgroundColor: "transparent", color: ["#FFDD01"], grid: { left: "4%", right: "5%", top: "20%", bottom: "5%", containLabel: true, }, xAxis: { axisTick: { show:
false }, boundaryGap: false, axisLabel: { margin: 10, textStyle: { color: "#CCCCCC", fontSize: this.WidthAdaptive(14) }, }, axisLine: { // onZero: false, // X軸脫離Y軸0刻度 lineStyle: { color: "#cccccc", type: "solid" }, }, data: [
"3月", "4月", "5月", "6月", "7月", "8月"], // data: ["2018年", "2019年", "2020年", "2021年", "2022年", "2023年"], }, yAxis: { name: "單位:億元", nameTextStyle: { color: "#CCCCCC", fontSize: this.WidthAdaptive(12), padding: this.WidthAdaptive(8), }, axisTick: { show: false }, axisLabel: { margin: this.WidthAdaptive(10), textStyle: { color: "#CCCCCC", fontSize: this.WidthAdaptive(12) }, }, axisLine: { show: false, lineStyle: { color: "#cccccc", type: "solid" }, }, splitLine: { lineStyle: { type: "dashed", color: "rgba(135,140,147,0.2)", }, }, boundaryGap: [0, 0.1], }, series: [ { name: "地面", type: "line", symbolSize: this.WidthAdaptive(6), symbol: "circle", data: [61, 65, 96, 59, 54, 69], areaStyle: { //區域填充樣式 normal: { //線性漸變,前4個引數分別是x0,y0,x2,y2(範圍0~1);相當於圖形包圍盒中的百分比。如果最後一個引數是‘true’,則該四個值是絕對畫素位置。 color: new this.$echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "rgba(255, 210, 0, 0.38)", }, { offset: 1, color: "rgba(109, 126, 0, 0)", }, ], false ), // shadowColor: "rgba(109, 126, 0, 0.5)", //陰影顏色 shadowBlur: this.WidthAdaptive(20), //shadowBlur設圖形陰影的模糊大小。配合shadowColor,shadowOffsetX/Y, 設定圖形的陰影效果。 }, }, }, ], }; window.onresize = function () { myChart.resize(); }; myChart.setOption(option); },