vue 使用 echarts

忘是亡心i 2023-10-06 22:08 57阅读 0赞

[echarts官网][echarts]

## 安装 ##

npm install echarts -S

## 全局导入 ##

//导入echarts  
import \* as echarts from ‘echarts’;  
Vue.prototype.$echarts = echarts

## 使用 ##

### 折线图 ###

<template>
      
      <div id="main" style="width: 500px; height: 400px"></div>
    </template>
    
    <script>
    export default {
          
      name: "Home",
      data() {
          
        return {
          };
      },
      mounted() {
          
        // 页面元素渲染之后再触发
        var chartDom = document.getElementById("main");
        var myChart = this.$echarts.init(chartDom);
        var option;
    
        option = {
          
          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",//折线图
            },
            {
          
              data: [150, 230, 224, 218, 135, 147, 260],
              type: "bar",//柱状图
            },
          ],
        };
        myChart.setOption(option);
      },
    };
    </script>
    
    
    <style scoped>
    </style>

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

[echarts]: https://echarts.apache.org/zh/index.html
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/3711a6462e154c6f8af75c05e14eafdc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_18,color_FFFFFF,t_70,g_se,x_16