引入第三方库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-chartsclass="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-chartsclass="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>

运行结果

【Echarts】在Vue中使用Echarts相关推荐

在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
Vue中使用echarts图表插件
一.安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.t ...
echart高级使用_Vue:在Vue中使用echarts
前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用 ...
vue echarts div变化_数据可视化之echarts在Vue中的使用
数据可视化的本质是将数据通过各种视觉通道映射成图形,可以使得用户更快.更准确的理解数据. 一.为什么选择echarts: 简单上手容易满足绝大部分的开发需要在可视化库中有较好的体验和口碑二.在V ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
vue中使用echarts实现动态数据绑定、获取后端接口数据
之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单 ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
vue中使用Echarts绘制K线图
一.需求问题在开发项目中,我们可能会遇到这样的需求.在vue中使用Echarts绘制K线图,进行数据分析.下面是一个简单的K线图绘制,数据是伪造的,虽然不多,但是能够实现大致的K线图效果. 二.需求 ...

【Echarts】在Vue中使用Echarts

在Vue中使用Echarts

引入第三方库vue-echarts

vue-echarts安装与使用

vue2中使用Echarts

vue-echarts安装

vue2中使用Echarts

vue3中使用Echarts

vue-echarts安装

vue3中使用Echarts

【Echarts】在Vue中使用Echarts相关推荐

最新文章

热门文章