VUE + ECharts实现图表

亦凉 2022-11-07 14:34 277阅读 0赞

因为这里演示了多种图表，使用的 echarts 引入方式是引入的所有组件，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。

## 1.安装echarts依赖 ##

npm install echarts --save

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L092ZXJ0dXJlcw_size_16_color_FFFFFF_t_70_pic_center]

## 2.在页面引入echarts ##

var echarts = require('echarts');

## 3.代码示例(折线图) ##

<template>
      <div>
        
        <div id="myChart" style="width: 500px; height: 300px;"></div>
      </div>
    </template>
    
    <script>
      // 引入echarts
      var echarts = require('echarts');
      export default { 
        name: "HelloWorld",
        data() { 
          return { 
    
          };
        },
        created() { 
          var then = this;
          // 调用方法创建
          setTimeout(function() { 
            then.drawLine();
          }, 500);
        },
        methods: { 
          drawLine() { 
            var then = this;
    
            // 初始化echarts实例
            let myChart = echarts.init(document.getElementById("myChart"));
    
            // 屏幕尺寸变化时，重新调整图表元素大小
            let sizeFun = function() { 
              myChart.resize();
            };
            window.addEventListener("resize", sizeFun);
    
            // 绘制图表
            myChart.setOption({ 
              /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
              xAxis: { 
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: { 
                type: 'value'
              },
              series: [{ 
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
              }],
              /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            });
          }
        },
      };
    </script>
    
    <style scoped>
    
    </style>

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L092ZXJ0dXJlcw_size_16_color_FFFFFF_t_70_pic_center 1]

## 4.echarts 的简单使用 ##

如果想使用其他的图表，可以在官网上查找，官网链接：https://echarts.apache.org/zh/index.html  
在官网的示例中找到想要的效果，例如这个：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L092ZXJ0dXJlcw_size_16_color_FFFFFF_t_70_pic_center 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L092ZXJ0dXJlcw_size_16_color_FFFFFF_t_70_pic_center 3]  
将 option 中的数据放到我们代码中的 myChart.setOption中，将虚线内的代码覆盖，效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L092ZXJ0dXJlcw_size_16_color_FFFFFF_t_70_pic_center 4]  
如果是从接口请求到的数据，就将 myChart.setOption 中的数据用改成接口里的就行了，另外在官方文档中有各项配置的详解，可以根据官方文档调整图表，达到自己喜欢的效果。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L092ZXJ0dXJlcw_size_16_color_FFFFFF_t_70_pic_center 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L092ZXJ0dXJlcw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/a685c5dd9dbe465f815f07368c21ec2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L092ZXJ0dXJlcw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221023/e43379e09f9440bab4852dc141af6980.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L092ZXJ0dXJlcw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221023/891a829630cc4110a39fcfcdd1aec997.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L092ZXJ0dXJlcw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221023/1903264a302d48cfad808a3ec6f40e4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L092ZXJ0dXJlcw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221023/29e65191415c4a8ea22fbf0cc15144f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L092ZXJ0dXJlcw_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221023/f12318e4174e49cba98a8108808526af.png