vue项目中使用echarts图表

vue项目中使用echarts图表

npm install echarts

在使用echarts的页面引入

import echarts from "echarts";

使用echrts绘制柱状图

• 实例化对象

  // 实例化对象
  let myChart = echarts.init(
  document.querySelector(".bar .chart") as HTMLCanvasElement
  );
  

• 指定配置和数据

  // 指定配置和数据
      let option = {
        color: ["#2f89cf"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xAxisdata,
            axisTick: {
              alignWithLabel: true,
            },
            /* 修改X轴刻度标签 */
            axisLabel: {
              color: "rgba(255,255,255,.6)",
              fontSize: "10",
            },
            //  x轴样式不显示
            axisLine: {
              show: false,
              // 如果想要设置单独的线条样式
              // lineStyle: {
              //    color: "rgba(255,255,255,.1)",
              //    width: 1,
              //    type: "solid"
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // y 轴文字标签样式
            axisLabel: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12",
            },
            // y轴线条样式
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                // width: 1,
                // type: "solid"
              },
            },
            // y 轴分隔线样式
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "本月产量",
            type: "bar",
            barWidth: "35%",
            data: yAxisdata,
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5,
            },
          },
        ],
      };
  

• 把配置给到实例对象

  // 把配置项给到实例对象
  myChart.setOption(option);
  

• 设置图表随屏幕自适应

   /* 设置图表随屏幕自适应 */
   window.addEventListener("resize", function() {
  	 myChart.resize();
   });