vue-echarts

2021/03/07

共 459 字

约 2 分钟

归档：学习

标签： js

著名可视化js库

学习与参考：

echarts
vue-echarts

毕设里要用到图表展示数据，自然需要一个图形库。

本身用的vue+springboot，很自然就选择了vue-echarts

但是几经尝试，发现网上很多教程都不适合最新版的echarts

虽说我不用最新版就不用折腾了，教程多的是

但第一次用没有迁移的问题，干脆就学新的

于是乎细看起他们的官方文档

这里直接以全局引入为例

使用npm安装

npm install echarts vue-echarts

在main.js引入echarts与vue-echarts
网上大多数教程就出问题在这，根据ECharts 5 升级指南，

import echarts from 'echarts';
// 或者按需引入
import echarts from 'echarts/lib/echarts';

这两种方式，v5 中不再支持了。使用者需要如下更改代码解决这个问题：

import * as echarts from 'echarts';
// 按需引入
import * as echarts from 'echarts/lib/echarts';
//引入vue-echarts
import ECharts from 'vue-echarts'

注册组件

//注册组件，简单地说：使得能识别<v-chart></v-chart>
Vue.component('v-chart', ECharts);

使用这里出现第二个坑，根据vue-echarts迁移到v6的文档，
options重命名为option，以和ECharts本身保持一致下面是直接使用echarts官方柱状图的示例，真正设计数据在mounted函数里写就好了。

<template>
    <div>
        <v-chart class="chart" :option="option" />
        <div id="main" class="chart"></div>
    </div>
</template>
<script>
    export default {
        name: "Statistics",
        data(){
          return{
              option: {
                  title: {
                      text: 'ECharts 入门示例'
                  },
                  tooltip: {},
                  xAxis: {
                      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                  },
                  yAxis: {},
                  series: [{
                      name: '销量',
                      type: 'bar',
                      data: [5, 20, 36, 10, 10, 20]
                  }]
              }
          }
        },
        mounted() {
            
        },
        methods:{
            
        }
    }
</script>

vue-echarts

留言