Echarts在线免费图表

 
            let data = [
   { name: '1月', value: 230, group: '温度' },
   { name: '2月', value: 400, group: '温度' },
   { name: '3月', value: 450, group: '温度' },
   { name: '4月', value: 300, group: '温度' },
   { name: '5月', value: 300, group: '温度' },
   { name: '6月', value: 200, group: '温度' },
   { name: '1月', value: -24, group: '数量' },
   { name: '2月', value: 25, group: '数量' },
   { name: '3月', value: -7, group: '数量' },
   { name: '4月', value: 15, group: '数量' },
   { name: '5月', value: -25, group: '数量' },
   { name: '6月', value: -85, group: '数量' },
]
let temperatureData = data.filter(item=>item.group === '温度')
let quantityData = data.filter(item=>item.group === '数量')
option = {
   backgroundColor:'#061c4c',
   tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(13, 41, 102, 0.9)',
      borderWidth: 0,
      textStyle: {
         //提示框自己的样式
         fontSize: 14,
         color: '#fff',
         fontFamily: 'Noto Sans SC',
      },
      axisPointer: {
         label: {
            show: true,
            margin: 5,
            backgroundColor: '#0b1f56',
            color: '#fff',
            fontSize: 14,
            fontFamily: 'Noto Sans SC',
         },
         // lineStyle: {
         //     width: 0,
         // }
      },
   },

   xAxis: {
      type: 'category',
      "axisTick": {
         "show": false //隐藏x轴刻度
      }
   },
   yAxis: [
      {
         type: 'value',
         name: '%',
         nameTextStyle: {
            align: "right",
            fontSize: 15,
            color: 'rgb(229, 246, 254)'
         },
         axisLabel: {
            formatter: (val, key) => {
               if (key % 2 == 0) {
                  return val
               }
            }
         },
         splitLine: {
            show: true,
            lineStyle: {
               type: 'dashed',
               color: '#43B7C4',
               opacity: 0.25
            }
         },
      },
      {
         type: 'value',
         name: '个',
         nameTextStyle: {
            align: "left",
            fontSize: 15,
            color: 'rgb(229, 246, 254)'
         },
         axisLabel: {
            formatter: (val, key) => {
               if (key % 2 == 0) {
                  return val
               }
            }
         },
         splitLine: {
            show: false,
         },
      }],
   series: [
      {
         name: '温度',
         yAxisIndex: 0,
         type: 'line',
         position: 'left',
         showSymbol: false,
         data:temperatureData,
         lineStyle: {
            width: 3,
            color: "rgba(24, 144, 255, 1)",
         }
      },
      {
         name: '数量',
         type: 'line',
         yAxisIndex: 1,
         position: 'right',
         showSymbol: false,
         data:quantityData,
         lineStyle: {
            width: 3,
            color: "rgba(65, 228, 187, 1)",
         },
      },
   ],
}