在 Vue 项目中使用 ECharts（菜鸟）

1. 安装Echats
npm install echarts --save
2.项目入口文件main.js中引入Echarts

// 引入echarts
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

3.在需要用的组件中引入

var echarts = require('echarts');
//全局引入会将所的echarts图表打包，导致体积过大，最好还是按需引入(下次有时间继续更新)

4.例子：
html:

<!-- ECharts图表测试 -->
<div id="charts" style="width:300px;height:200px;}"></div>

js：//全部引入

var echarts = require('echarts');

export default {mounted() {/*ECharts图表*/var myChart = echarts.init(document.getElementById('charts'));myChart.setOption({series : [{name: '访问来源',type: 'pie',radius: '55%',itemStyle: {normal: {// 阴影的大小shadowBlur: 200,// 阴影水平方向上的偏移shadowOffsetX: 0,// 阴影垂直方向上的偏移shadowOffsetY: 0,// 阴影颜色shadowColor: 'rgba(0, 0, 0, 0.5)'}},data:[{value:400, name:'搜索引擎'},{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:274, name:'联盟广告'},{value:235, name:'视频广告'}]}]})},
}

效果：

在 Vue 项目中使用 ECharts（菜鸟）相关推荐

echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
在Vue项目中使用echarts完成迁徙图（Map组件）
在Vue项目中使用echarts完成迁徙图此章个人理解:参考原有的代码基础上,完成了一个地图迁徙的组件先了解一下整体代码, 有能力的可以参照整体完成, 下面也会列出详细步骤解答代码我放在了gith ...
vue项目中使用echarts完成图表类的开发之饼图，环形图
最近在vue项目中使用echarts.js完成诸如饼图,环形图,折线图,折线图加柱状图,和柱状图(水平柱状图和垂直柱状图),以及柱状图堆叠,下面请看图片展示: 如上图所示基本上echarts的简单图表 ...
如何在 Vue 项目中使用 echarts
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
vue项目中使用echarts实现词云
0.先上效果图 1.安装插件 -- vue项目中 npm install echartsnpm install echarts-wordcloud 2.vue页面中引入组件 <word-clou ...
如何在 Vue 项目中使用 echarts 1
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
在vue项目中使用echarts 阿星小栈
在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts, Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 安装echarts依赖 ...
vue项目中使用echarts和china.js实现中国地图
在echarts最新的5.4.0版本中,已不能直接引用china.js来绘制中国地图,需要我们自己下载china.js包在网上查找资料,大部分是在index.html文件中直接引入echarts和c ...
Vue项目中使用Echarts地图（精确到区）
使用地图需要获取地图的json文件这里是免费获取地图json 在原本Echarts图变中你看到的代码是这样的: var uploadedDataURL = "https://geo.dat ...
在vue项目中使用echarts中的dataset制作多维度的柱状图
1.背景公司给我分配了一个任务是做一个大屏项目,类似于监控中心那种.页面内容比较简单,最下面是两个柱状图,柱状图是多维度的,而我也是第一次在项目中使用echarts,记录一下此次过程. 2.开始 2 ...

在 Vue 项目中使用 ECharts（菜鸟）

在 Vue 项目中使用 ECharts（菜鸟）相关推荐

最新文章

热门文章