Echarts在线免费图表

 
            option = {
   //你的代码
   xAxis: {
      type: "category",
      data: [1, 2, 3, 4],
      axisLabel: {
         color: "#4E5766",
         formatter: "{value} 月",
      },
      axisTick: {
         lineStyle: {
            color: "#C7CBD1",
         },
      },
      axisLine: {
         lineStyle: {
            color: "#C7CBD1",
         },
      },
   },
   yAxis: [
      {
         name: "金额（万元）",
         type: "value",
         nameTextStyle: {
            color: "#8994A3",
         },
         axisLabel: {
            color: "#8994A3",
         },
         splitLine: {
            lineStyle: {
               type: "dashed",
               color: "#E0E2E5",
            },
         },
      },
      {
         type: "value",
         position: "right",
         splitLine: {
            show: false,
         },
      }
   ],
   series: [
      {
         name: "月度达成",
         type: "bar",
         data: [50, 100, 200, 300],
         yAxisIndex: 0
      },
      {
         name: "达成率",
         type: "line",
         data: [0.2, 0.5, 0.8, 0.9],
         yAxisIndex: 1,
         color: 'yellow'
      },
   ]
};
//分割两侧的坐标轴
let maxY = 0
const computedYData = () => {

   let arr1 = [],
      arr2 = []
   option.series.map((item) => {
      if (item.type == "bar") {
         arr1.push(...item.data)
      } else {
         arr2.push(...item.data)
      }
   })
   let max1 = Math.max(...arr1)
   let max2 = Math.max(...arr2)
   let intervalY1 = Math.ceil(max1 / 6)
   let intervalY2 = Math.ceil(max2 / 6)
   if (max1 > max2) {
      maxY = max1
   } else {
      maxY = max2
   }
   option.yAxis.map((item, index) => {
      item.splitNumber = 6
      let interval
      if (index == 0) {
         interval = intervalY1
      } else {
         interval = intervalY2
      }
      item.interval = interval
      item.max = interval * 6
   })
}
computedYData()

//设置参考线
let flag = false
const setLine = (value) => {
   if (flag) {
      if (maxY < value) {
         option.yAxis[0].max = value
         option.yAxis[0].interval = Math.ceil(value/6)
      }
      option.series[0].markLine = {
         data: [
            {
               yAxis: value, // 自定义值
               label: {
                  // 不显示基准线名称
                  show: true,
                  position: "insideEndTop",
                  backgroundColor: "#FFECE8",
                  color: "#E93838",
                  padding: [2, 4, 0],
                  height: 20,
                  lineHeight: 20,
                  fontSize: 12,
                  formatter(params) {
                     console.log(params)
                     return "合格：" + params.value + "万元"
                  },
               },
               lineStyle: {
                  color: "#E93838",
               },
            },
         ],
      }
   } else {
      delete option.yAxis[0].max
      delete option.yAxis[0].interval
      option.series[0].markLine = {}
   }
}
flag = true
setLine(750)
setTimeout(() => {
   //取消参考线
   flag = false
   myChart.clear()
   setLine(750)
   myChart.setOption(option)
}, 3000)