vue中 ECharts 图表使用教程

ECharts 数据可视化图表有很多，今天就以饼图为例

npm install echarts --save

第二步： 在main.js中全局引用ECharts，当然你也可以按需引用。

 import echarts from 'echarts'  //引入echartsVue.prototype.$echarts = echarts  //挂载在全局

注意：引入 echars 5.0 如果遇到报错 "export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’
请使用以下引入方式：

 import * as echarts from 'echarts'  //引入echartsVue.prototype.$echarts = echarts  //挂载在全局

第三步： 接下来就可以使用了，首先在ECharts官网找到你想要的效果实例

点击进入实例详情：

使用完整代码：

<template><div class="home"><!-- 定义图表外层容器 --><div id="myHomeChart" ref="homeEcharts"></div></div>
</template>
<script>
export default {data() {return {}},mounted() {// 调用当前图表this.dataChart()},methods: {// 绘制图表dataChart() {//初始化图表，this.$refs.homeEcharts获取到图表容器var myChart = this.$echarts.init(this.$refs.homeEcharts)// 初始化配置（官网实例详情左侧代码，直接复制过来按项目需求修改即可）var option = {tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'},legend: {orient: 'vertical',left: 10,data: ['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']},series: [{name: '访问来源',type: 'pie',selectedMode: 'single',radius: [0, '30%'],label: {position: 'inner'},labelLine: {show: false},data: [{ value: 335, name: '直达', selected: true },{ value: 679, name: '营销广告' },{ value: 1548, name: '搜索引擎' }]},{name: '访问来源',type: 'pie',radius: ['40%', '55%'],label: {formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',backgroundColor: '#eee',borderColor: '#aaa',borderWidth: 1,borderRadius: 4,// shadowBlur:3,// shadowOffsetX: 2,// shadowOffsetY: 2,// shadowColor: '#999',// padding: [0, 7],rich: {a: {color: '#999',lineHeight: 22,align: 'center'},// abg: {//     backgroundColor: '#333',//     width: '100%',//     align: 'right',//     height: 22,//     borderRadius: [4, 4, 0, 0]// },hr: {borderColor: '#aaa',width: '100%',borderWidth: 0.5,height: 0},b: {fontSize: 16,lineHeight: 33},per: {color: '#eee',backgroundColor: '#334455',padding: [2, 4],borderRadius: 2}}},data: [{ value: 335, name: '直达' },{ value: 310, name: '邮件营销' },{ value: 234, name: '联盟广告' },{ value: 135, name: '视频广告' },{ value: 1048, name: '百度' },{ value: 251, name: '谷歌' },{ value: 147, name: '必应' },{ value: 102, name: '其他' }]}]}// 把参数配置放到容器里myChart.setOption(option)},// 销毁实例(看项目需要进行销毁实例)destroyChart() {this.$echarts.init(this.$refs.homeEcharts).dispose();}}
}
</script>
<style>
/* 给图表容器定义宽高 */
#myHomeChart {width: 800px;height: 800px;
}
</style>

如果报错 echarts Cannot read properties of undefined (reading ‘init’)

可以下载4.8.0 版本

npm install echarts@4.8.0 --save

vue中 ECharts 图表使用教程相关推荐

Vue中echarts图表x轴文字倾斜展示(防止字迹展示重叠)
前言 Vue中echarts图表x轴文字倾斜展示效果图代码 axisLabel: {fontSize: 12,color: '#666',interval: 0,//主要是下面的代码-倾斜rota ...
【Vue+Echarts】Vue中Echarts图表的使用（三）—— 组件模块调用不同类型的Echarts图表（动态图表生成）
这节也是这个系列最后的一篇文章了. 第二篇文章,将Echarts封装成了组件,在使用的时候,只需将ChartsOption传递进去即可,同时,提供了监听事件,当Option发生变化时,会刷新图表. 因 ...
echart vue 图表大小_vue中echarts图表大小适应窗口大小且不需要刷新案例
我就废话不多说了,大家还是直接看代码吧~ 内容如下: // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getEl ...
vue使用echarts图表自适应的几种解决方案
这篇文章主要给大家介绍了关于vue使用echarts图表自适应的几种解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 1. ...
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...
vue中echarts自适应屏幕大小
vue中echarts自适应屏幕大小,延迟执行项目中出现echarts适应屏幕大小,有时会遇到不管屏幕大小如何变化echarts图表大小不变的情况:或者出现图表变化延迟的情况,针对这两种情况,分别解 ...
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理目录 Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理一.简单介绍二. ...
vue 中 echarts 中国地图
我们先来看一下效果说明:echarts 版本 "echarts": "^4.2.0-rc.2", 版本高的话,node_model 里面没有 map ...
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点先看效果图我们可以看到图中图表不仅有渐变色,同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来,我们一起来实现一下这个效果 1. ...

vue中 ECharts 图表使用教程

ECharts 数据可视化图表有很多，今天就以饼图为例

使用完整代码：

如果报错 echarts Cannot read properties of undefined (reading ‘init’)

vue中 ECharts 图表使用教程相关推荐

最新文章

热门文章