在Vue3中使用echarts图表-阿里云开发者社区

在Vue3中使用echarts图表

2023-08-26 220

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在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
        }
      }
    ]
  });