Echarts在线免费图表

 
            const chartData = {
  legend: ['市级办件数', '区级办件数'], // 图例
  xAxis: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07'],
  data1: [28, 51, 43, 43, 48, 15, 43],
  data2: [28, 39, 36, 43, 48, 15, 36],
  data3: [],
}
let zrUtil = echarts.util
zrUtil.each(chartData.xAxis, (item, index) => {
  chartData.data3.push([{
    coord: [index, chartData.data2[index]],
  }, {
    coord: [index + 1, chartData.data2[index + 1]],
  }])
})
option = {
   grid: {
      right: '5%',
      bottom: '18%',
   },
   tooltip: {
      formatter(params) {	// 根据条件修改
         let unit = '%'
         let relVal = params[0].name
         for (let i = 0; i < params.length; i++) {
            relVal += '<div>' + params[i].seriesName + ' : ' + params[i].value + unit + '</div>'
         }
         return relVal
      },
   },
   legend: {
      right: '5%',
      itemHeight: 4,
      data: chartData.legend, // 图例
   },
   xAxis: {
      axisTick: {
         show: true,
         alignWithLabel: true,
         inside: true,
         length: 2,
      },
      axisLabel: {
         interval: 0,
      },
      data: chartData.xAxis,
   },
   yAxis: {
      axisLabel: {
         show: true,
         formatter(value) {
            return value + '%'
         },
      },
   },
   series: [{
      type: 'line',
      name: chartData.legend[0], // 图例对应类别
      label: { formatter: '{c}%' },
      data: chartData.data1, // 纵坐标数据quanmei
      areaStyle: { // 区域颜色
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(12, 101, 246, 0.6)',
         }, {
            offset: 1,
            color: 'rgba(12, 101, 246, 0.1)',
         }]),
      },
   }, {
      type: 'line',
      name: chartData.legend[1],
      data: chartData.data2,
      areaStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(0, 214, 138, 0.6)',
         }, {
            offset: 1,
            color: 'rgba(0, 214, 138, 0.1)',
         }]),
      },
   }, {
      type: 'lines',
      coordinateSystem: 'cartesian2d',
      zlevel: 1,
      symbolSize: 3,
      smooth: true,
      symbol: 'circle',
      effect: {
         show: true,
         smooth: true,
         period: 2,
         symbolSize: 4,
      },
      // color: ['#75F8EF', '#FEE186'],
      lineStyle: {
         normal: {
            color: '#75F8EF',
            width: 0,
            opacity: 0,
            curveness: 0,
         },
      },
      data: chartData.data3,
   }],
}