在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>
运行结果
