eachers (折线图8分钟快速上手)

最新推荐文章于 2023-08-07 16:46:11 发布

妄梦久挽

最新推荐文章于 2023-08-07 16:46:11 发布

阅读量357

点赞数

分类专栏： eachers 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/weixin_53185230/article/details/127666703

版权

eachers 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<template>
  <div class="Echarts">
    <div id="main" style="width: 1000px; height: 600px"></div>
  </div>
</template>

<script>
export default {
  name: "Echarts",
  methods: {
    myEcharts() {
      var myChart = this.$echarts.init(document.getElementById("main"));
      //配置图表
      var option = {
        legend: {
          top: "bottom",
        },

        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: [{ type: "value" }],
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };

      myChart.setOption(option);
    },
  },
  mounted() {
    this.myEcharts();
  },
};
</script>

<style></style>