vue-echarts基本使用以及自适应屏幕

向右看齐 2021-07-26 00:47 605阅读 0赞

# 一、基本使用  #

vue-echarts的GitHub地址：[https://github.com/ecomfe/vue-echarts/blob/master/README.zh\_CN.md][https_github.com_ecomfe_vue-echarts_blob_master_README.zh_CN.md]

注意：vue-echarts在使用前要先安装echarts，不要只安装vue-echarts这一个

1，安装vue-echarts

cnpm i -S vue-echarts echarts

2,main.js中全局注册组件

import echarts from 'echarts'
    import ECharts from 'vue-echarts/components/ECharts'
    Vue.component('VueEcharts', ECharts)

3，修改echarts

在项目的node-modules文件夹中根据路径：vue-echarts/components/ECharts打开Echarts.vue![20200318155251771.png][]

将默认的echarts样式（600px×400px）的宽高都设为100%，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

4，使用

<template>
      <div class="content">
        <vue-echarts :options="option_column" class="columnchart" />
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          option_column: {
            title: { text: "Column Chart" },
            tooltip: {},
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          }
        };
      }
    };
    </script>
    
    <style  scoped lang="scss">
    .content {
      width: 100%;
      height: 100%;
      border: 1px solid red;
      .columnchart {
        width: 500px;
        height: 500px;
        border: 1px solid yellow;
      }
    }
    </style>

5，效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

如果想更换主题，添加theme属性即可，如：**theme='dark'，theme='macarons'**

![20200922153323845.png][]

如果想要数据从数据库中获取，那么可以使用express作为web服务器。

具体内容参考：[https://mp.csdn.net/console/editor/html/103077382][https_mp.csdn.net_console_editor_html_103077382]

<template>
      <div class="home">
        <el-button @click="refreshData()">test</el-button>
        <div class="content">
          <vue-echarts :options="option"></vue-echarts>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          option: {}
        };
      },
      components: {},
      created() {},
      mounted() {
        this.refreshData();
      },
      computed: {},
      methods: {
        async refreshData() {
          var res = await this.$axios.get("/users/test");
          var arr = [];
          res.data.forEach(element => {
            arr.push(element.num);
          });
          this.option = {
            title: { text: "Column Chart" },
            tooltip: {},
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: arr
              }
            ]
          };
        }
      }
    };
    </script>
    
    <style scoped lang="scss">
    .home {
      height: 100vh;
      border: 1px solid red;
      .content {
        width: 800px;
        height: 600px;
        border: 1px solid blue;
        margin: auto;
      }
    }
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

# 二、自适应屏幕 #

![20200922151817739.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

window.addEventListener("resize", this.resizeTheChart);

resizeTheChart() {
          if (this.$refs && this.$refs.echarts1) {
            this.$refs.echarts1.resize();
          }
        }

[https_github.com_ecomfe_vue-echarts_blob_master_README.zh_CN.md]: https://github.com/ecomfe/vue-echarts/blob/master/README.zh_CN.md
[20200318155251771.png]: /images/20210725/89a7c3fd04cf4568ad4e9e25382ed341.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200318155407830.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200318155759115.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20200922153323845.png]: https://img-blog.csdnimg.cn/20200922153323845.png
[https_mp.csdn.net_console_editor_html_103077382]: https://mp.csdn.net/console/editor/html/103077382
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200802182608388.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20200922151817739.png]: https://img-blog.csdnimg.cn/20200922151817739.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200922151953577.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70