【Echarts】在Vue中使用Echarts

在Vue中使用Echarts

• 引入第三方库vue-echarts
• vue-echarts安装与使用
• • vue2中使用Echarts
  • • vue-echarts安装
    • vue2中使用Echarts
  • vue3中使用Echarts
  • • vue-echarts安装
    • vue3中使用Echarts

引入第三方库vue-echarts

Vue是数据驱动dom，改变数据让图表自动根据数据变化更新，但是Echarts中是使用实例，myChart.setOption(option)进行更新，并不能根据数据变换自动更新视图，因此Echarts不符合vue使用的概念。因此为了解决这个问题，引入第三方库vue-echarts

vue-echarts安装与使用

vue2中使用Echarts

vue-echarts安装

安装两个库：echarts和vue-echarts

npm install echarts vue-echarts复制

要在vue 2下使用vue-echarts，需要确保@vue/composition-api 已经安装
（-D是–save-dev的缩写，也就是说composition-api并不会打包到生产版本，只在开发版本）

npm i -D @vue/composition-api复制

为了更小的打包体积，建议是手动从ECharts引入单个图表和组件，可参考github文档
如果实在需要全量引入从而无需手动引入模块，需需要在代码中添加：

import 'echarts'复制

vue2中使用Echarts

main.js文件

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
//引入ECharts
import ECharts from 'vue-echarts';
import 'echarts';
 
Vue.component('ECharts',ECharts);复制

DataView.vue
ECharts第一个简单demo

<template>
    <div>
        <e-charts
        class="chart"
        :option="option"
        />
    </div>
    
</template>
<script>
export default {
    data(){
        return{
            option:{
                xAxis: {
                    type: 'category',
                    data: ['A', 'B', 'C']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: [120, 200, 150],
                    type: 'line'
                    }
                ]
            }
        }
    }
    
}
</script>
 
<style scoped>
.chart{
    height: 400px;
}
 
</style>复制

运行结果

修改完善后：

• 完善数据形式，获取后端数据进行图表渲染；
• 每秒更新一次数据（随机生成）；
• data一旦改变，option改变，如此一来，Echarts在vue中使用完美符合vue开发概念

修改后的DataView.vue

<template>
    <div>
        <e-charts
        class="chart"
        :option="option"
        />
    </div>
    
</template>
<script>
export default {
    data(){
        return{
            data:this.getRandomData(),
            
        }
    },
    // data一旦改变，option则改变，因此将option放入计算属性
    computed:{
        option(){
            return{
                xAxis: {
                    type: 'category',
                    // data: ['A', 'B', 'C']
                    // 映射
                    data:this.data.map(d => d.time)
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    type: 'line' , 
                    // data: [120, 200, 150],
                    data: this.data.map(d => d.value)
                    }
                ]
            }
                
            }
    },
    // 更新data，每秒更新一次
    created(){
        setInterval(() =>{
            this.data=this.getRandomData();
        },1000);
    },
    methods:{
        //随机生成数据
        getRandomData(){
            return [
                {
                    time:'2018-01-02',
                    value:Math.random()*100,
                },
                {
                    time:'2018-01-02',
                    value:Math.random()*100,
                },
                {
                    time:'2018-01-02',
                    value:Math.random()*100,
                },
                {
                    time:'2018-01-02',
                    value:Math.random()*100,
                },
            ];
        }
    }
    
}
</script>
 
<style scoped>
.chart{
    height: 400px;
}
 
</style>复制

运行结果

vue3中使用Echarts

vue-echarts安装

安装两个库：echarts和vue-echarts

npm install echarts vue-echarts复制

vue3中使用Echarts

main.js文件

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
 
import ECharts from 'vue-echarts';
import 'echarts';
 
createApp(App)
    .use(store)
    .use(router)
    .component('ECharts', ECharts)
    .mount('#app')复制

App.vue
第一个简单示例

<template>
  <e-charts class="chart" :option="option"/>
</template>
<script setup> 
// 在vue3中要将option挂载上，需要ref
import {ref} from 'vue';
const option = ref({
    xAxis: {
      type: 'category',
      data: ['A', 'B', 'C']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150],
        type: 'line'
      }
    ]
});
</script>
 
<style>
.chart{
  height: 400px;
}
</style>复制

运行结果

改进App.vue
让option响应data数据更新

<template>
  <e-charts class="chart" :option="option"/>
</template>
<script setup> 
// 在vue3中要将option挂载上，需要ref
import {ref ,computed} from 'vue';
const data=ref([
  {value:50,name:'A'},
  {value:80,name:'B'},
  {value:30,name:'C'},
  {value:120,name:'D'},
  {value:10,name:'E'},
]);
 
// 没秒更新数据一次
setInterval(() =>{
  data.value=data.value.map(item =>({
    ...item,
    value:Math.random()*100,
  }));
},1000);
 
//如何让option响应data数据更新
const option=computed(() =>{
  return {
    xAxis: {
      type: 'category',
      // data: ['A', 'B', 'C']
      // 实际数据映射
      data:data.value.map(d => d.name)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        // data: [120, 200, 150],
        data:data.value.map(d => d.value),
        type: 'line'
      }
    ]
}
});
 
// const option = ref({
//     xAxis: {
//       type: 'category',
//       // data: ['A', 'B', 'C']
//       // 实际数据映射
//       data:data.value.map(d => d.name)
//     },
//     yAxis: {
//       type: 'value'
//     },
//     series: [
//       {
//         // data: [120, 200, 150],
//         data:data.value.map(d => d.value),
//         type: 'line'
//       }
//     ]
// });
 
 
</script>
 
<style>
.chart{
  height: 400px;
}
</style>
 复制

运行结果