vue中使用Echart

最新推荐文章于 2024-09-05 09:52:45 发布

*洋芋果果

最新推荐文章于 2024-09-05 09:52:45 发布

阅读量1.0k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_61472704/article/details/123132669

版权

一、安装Echart

cnpm install echarts --save

二、引入并使用

<template>
  <div class="container">
    <div class="analyse-chart" style="padding: 0px 10px">
      <div id="myChart" class="chart"></div>
    </div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";
import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      // 需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(
        document.getElementById("myChart") as HTMLElement
      );
      // 绘制图表
      myChart.setOption({
        title: {
          text: "近五年1月同比",
          x: 15,
          y: 10,
          textStyle: {
            fontSize: 14,
            color: "#333",
          },
        },
        color: "#0084ff",
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          axisLabel: {
            textStyle: {
              color: "#999999",
              fontSize: "10",
            },
          },
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            barWidth: 20,
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });

     

      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    });
  }
};
</script>

三、效果：