Echarts在线免费图表

 
            
let obj = {
   xData: ['2015年', '2016年', '2017年', '2018年', '2019年', '2020年', '2021年',],
   legend: ['幼儿园', '小学', '初中', '高中', '职校',],
   lineData: [
      {
         name: '幼儿园',
         data: [2000, 1900, 2000, 2300, 2500, 2900, 2700],
         color: '#1984ff',
      },
      {
         name: '小学',
         data: [400, 490, 700, 1400, 2000, 2200, 2600],
         color: '#e7f90d',
      },
      {
         name: '初中',
         data: [1700, 1700, 1600, 1700, 1500, 1700, 2200],
         color: '#62dc34',
      },
      {
         name: '高中',
         data: [1500, 1600, 1500, 1600, 2000, 2300, 2000],
         color: '#70c7fd',
      },
      {
         name: '职校',
         data: [1000, 1200, 1500, 1800, 2200, 2000, 2500],
         color: '#735ec7',
      },
   ]
}
let serData = []
obj.lineData.forEach(item => {
   serData.push({
      name: item.name,
      type: "line",
      showSymbol: true,
      symbolSize: 8,
      symbol: "circle",
      lineStyle: {
         color: item.color,
      },
      itemStyle: {
         color: "#fff",
         borderColor: item.color,
         borderWidth: 2,
      },
      data: item.data,
   })
})

option = {
   backgroundColor: "#0a2b45",
   title: {
      text: '教师数量趋势',
      top: "1%",
      textAlign: "left",
      left: "1%",
      textStyle: {
         color: "#38adb9",
         fontSize: 18,
         fontWeight: "600",
      },
   },
   legend: {
      icon: 'circle',
      top: '8%',
      //   left: 'center',
      orient: 'horizontal', //图例方向【horizontal/vertical】
      itemHeight: 10, //修改icon图形大小
      itemWidth: 10, //修改icon图形大小
      selectedMode: false, //不允许点击图例
      itemGap: 50,
      textStyle: {
         fontSize: 12,
         color: '#fff',
         padding: [0, 8],
      },
      data: obj.legend,
   },
   tooltip: {
      show: true,
      trigger: "axis",
      backgroundColor: "#0a2b45", // 设置背景颜色
      textStyle: {
         color: '#333',
         color: '#fff',
         fontSize: 14,
      },
      borderColor: "rgba(255, 255, 255, .16)",
      axisPointer: {
         lineStyle: {
            color: "rgba(28, 124, 196)",
         },
      },

      formatter: (params) => {
         let arr = [...params];
         let str = '';
         arr.forEach((item, index) => {
            str += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
               obj.lineData[index].color +
               ';"></span>' + item.seriesName + '  ' + item.data + '个<br />';
         });
         str = arr[0].name + '<br />' + str;
         return str;
      },
   },


   grid: {
      top: "15%",
      left: "8%",
      right: "2%",
      bottom: "18%",
      containLabel: true,
   },
   xAxis: [
      {
         type: "category",
         axisLine: {
            lineStyle: {
               color: "#81b0d0",
            },
         },
         axisLabel: {
            interval: 0,
            align: "center",
            margin: 10,
            color: "rgb(139, 143, 147)",
            rotate: 0,
            textStyle: {
               fontSize: 14,
            },
         },
         splitLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         boundaryGap: true,
         data: obj.xData,
      },
   ],

   yAxis: [
      {
         type: "value",
         name: "单位：个",
         nameTextStyle: {
            //y轴上方单位的颜色
            color: "rgb(139, 143, 147)",
         },
         // splitNumber: 6,
         axisLine: {
            show: true,
            lineStyle: {
               color: "#81b0d0",
            },
         },
         splitLine: {
            show: true,
            lineStyle: {
               color: "rgba(221, 228, 241,.3)",
               // type: "dashed",
            },
         },
         axisLabel: {
            color: "rgb(139, 143, 147)",
            textStyle: {
               fontSize: 14,
            },
         },
         axisTick: {
            show: false,
         },
      },
   ],
   series: serData,
};