首页 前端知识 【Echarts】在Vue中使用Echarts

【Echarts】在Vue中使用Echarts

2024-01-31 12:01:46 前端知识 前端哥 311 714 我要收藏

在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>

运行结果
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/933.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!