使用Echarts绘制图表，前端使用VUE、CSS、JS

最新推荐文章于 2024-12-07 20:45:40 发布

CHAOS-LI

最新推荐文章于 2024-12-07 20:45:40 发布

阅读量119

点赞数 2

文章标签：前端 javascript echarts

本文链接：https://blog.csdn.net/l19357565459/article/details/140964521

版权

```HTML
<template>
  <div class="app-container">

    <!-- 图表占位区域 -->
    <div>
      <div id="main" style="width: 100%; height: 300px; background: #fff"></div>
    </div>
    

  </div>
</template>

<script>

// 引入echarts 直接复制
import * as echarts from "echarts";


export default {
  name: "EXmonitoring",
  data() {
    return {
      // 如果需要默认数据，现在数据区定义好
		...
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    // 如果默认打开页面渲染图表，这里调用获取数据函数
    this.getspcList();
  },
  
  methods: {
    // 获取数据函数，如果点击按钮获取数据，则设置调用函数按钮
    getspcList() {
      Spclist(this.queryParams).then((response) => {
        this.spcList = response.rows;
        this.initChart();
      });
    },
    /** 图表渲染 */
    initChart() {
      var myChart = echarts.init(document.getElementById("main")); //这行直接复制

      // 数据部分，按照图表要求直接在Echarts上找相应的格式
      // 如果从后端获取数据可以在函数中加data变量，然后在这里处理后放到option中
      var option = {
          
        };
      
      myChart.setOption(option);// 这行直接复制
    },
  }
};
```