在Vue3中使用echarts图表

第一步： 先安装echarts

npm install echarts --save

第二步:  在js中导入echarts

import * as echarts from "echarts";

第三步: 写出HTML样式，CSS样式

  <!-- echarts图表 -->
    <div class="echarts">
      <div id="echarts_con" />
    </div>

.echarts {
  margin: auto;
  border-radius: 8px;
  margin-top: 20px;
  width: 97%;
  background-color: white;
  height: 300px;
  #echarts_con {
    width: 100%;
    height: 100%;
  }
}

第四步: 在js中绑定HTML

const echarts_con = echarts.init(document.getElementById("echarts_con"));

第五步: 图表样式绘制

 echarts_con.setOption({
    title: {
      text: "近30天订单数量",
      left: 10,
      top: 10,
      textStyle: {
        //主标题文字样式
        color: "#505050", //字体颜色
        fontSize: 15, //字体大小
        // fontStyle:'italic',//斜体
        fontWeight: 500 //加粗
      }
    },
    grid: {
      left: "5%",
      right: "10%",
      top: "20%",
      bottom: "15%",
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: "axis"
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#9a9a9a"
          }
        },
        axisTick: {
          show: true
        },
        axisLabel: {
          color: "#9a9a9a",
          margin: 6
        },
        splitLine: {
          show: false
        },
        boundaryGap: ["5%", "5%"],
        data: xData.value
      }
    ],
    yAxis: [
      {
        type: "value",

        axisLabel: {
          color: "#9a9a9a",
          margin: 6
        },
        splitLine: {
          lineStyle: {
            color: "#9a9a9a",
            type: "dashed"
          }
        }
      }
    ],
    series: [
      {
        name: "订单量",
        type: "line",
        stack: "总量",
        symbol: "circle",
        data: arr.value,
        symbolSize: 6,
        itemStyle: {
          color: "#3a8bef",
          borderColor: "#3a8bef",
          borderWidth: 2
        }
      }
    ]
  });

就这样一个echarts图表就完成了。最后可以根据自己的需要来修改内容绘制图表。

效果演示：