vue使用echarts过程

最新推荐文章于 2023-04-18 18:08:47 发布

青春你我他，愿咱不掉发

最新推荐文章于 2023-04-18 18:08:47 发布

阅读量609

点赞数 1

文章标签： vue echarts

本文链接：https://blog.csdn.net/JWmask/article/details/123654603

版权

第一步
先下依赖 npm install echarts -S
在这里插入图片描述
第二步
项目引入echarts
如果在app和vue下面在引入必须加 * as 如果先引入echarts就不用加as 来引入然后把echarts放到原型上就可以全局用了

第三步
实用

<template>
  <div id="header">
    <div id="div" ref="chart" style="width: 600px; height: 376px"></div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.getEchartData();
  },
  methods: {
    getEchartData() {
      let myChart = this.$echarts.init(this.$refs.chart);
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>