vue项目中使用echarts完成图表类的开发之饼图，环形图

最近在vue项目中使用echarts.js完成诸如饼图，环形图，折线图，折线图加柱状图，和柱状图（水平柱状图和垂直柱状图），以及柱状图堆叠，下面请看图片展示：

如上图所示基本上echarts的简单图表都是涉及到了，那么接下来主要详细介绍一下图表的相关配置项，其实这些东西echarts官方文档都是有的，但是想要快速构建跟我们设计图一样的样式还是需要点时间的，根据以上的例子，详细介绍一下开发中所需的配置项。。。

声明一下：我项目中使用的是echarts,而不是vue-echarts插件。

首先，介绍的是vue项目中如何使用echarts插件：

第一步。我们先安装echarts插件到项目中

npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

第二步在相应的模块中导入echarts包：请看示例：

let echarts = require("echarts");

第三步创建echarts实例并初始化echarts

请看详细代码：这是封装的饼图组件：

请注意：导入echarts包使用require,为何不使用import?

接下来就简单的补充一下为何不使用import，因为会报错。。。其实我们引入其他包都是用import,比如element-ui，等等其他包。。。这个主要是看插件包是如何导出的，如果插件包是export default xxxx或者export 某个方法时，那么我们引入就使用import,相反如果插件包是module.exports xxxx，那么我们就要使用require引入包，详细的解释还请各位小伙伴自行补习。。。在此就不做过多赘述了

补充说明一下：如果控制台报出 DEPRECATED: 'normal' hierarchy in itemStyle has been removed since 4.0. All style properties are configured in itemStyle directly now. 这样的警告，请不要惊慌这不是报错，该警告是在提示我们里面的normal这个字段已经废弃了，所以我们可以把这个字段清除了，就不会提示这个警告信息了。。。

1.饼图（可复制粘贴直接使用）

<template><div class="companyList-ctn" :style="{ 'width': width }"><div :id="id" :style="{'width':'100%','height': height}"></div></div>
</template>
<script>
//创建echarts的初始化id
let _c = { id: 1 };
//导入echarts包，导入echarts包使用require,为何不使用import
let echarts = require("echarts");
export default {created() {_c.id++;this.id = "c_pie_" + _c.id;//动态创建饼图的id选择器，由于id的唯一性},props: {pieData: {type: Object,},},data() {return {myPieChart:'',//声明一个变量来接收echarts初始化的实例width:'100%',height:300+'px'};},mounted() {// 初始化echartsthis.$nextTick(()=>{this.initChart();})// 监听浏览器窗口变化初始化echarts，也就是当浏览器可视区域改变，让图表自适应window.addEventListener('resize',this.initChart,false);},//vue组件实例销毁之前移除监听事件，避免当我们切换路由时导致vue出现警告：//echarts.js?1be7:2160 Uncaught Error: Initialize failed: invalid dom.beforeDestroy () {window.removeEventListener('resize', this.initChart)},methods: {initChart() {//获取dom插入echarts图表var chartDom = document.getElementById(this.id);//在每次初始化实例之前先清除上一次创建好的实例，以便数据是最新的，避免数据错乱if (this.myPieChart != null && this.myPieChart != "" && this.myPieChart != undefined) {this.myPieChart.dispose();//销毁}//echarts初始化方法this.myPieChart = echarts.init(chartDom);let _this=this// 监听页面变化图表自适应this.myPieChart.resize()//echarts配置项var option = {tooltip: {//提示框浮层的位置，trigger: "item",//默认不设置时位置会跟随鼠标的位置。},legend:{//饼图图例配置项// 类目位置orient: "vertical", //类目排列显示top: "center", //类目位置left: 40 + "%", //类目位置icon: "circle", //类目形状，默认圆角矩形itemWidth: 10, //类目原型宽度itemHeight: 10, //类目原型高度textStyle: {lineHeight: 15,fontSize: 14,color: "#333333",},data: [//类目数据"企业投资项目备案表/政府投资项目可行性研究报告批复","建设用地规划许可证","建设工程设计方案确认书","政府投资项目初步设计批复","建设工程规划许可证","建筑工程施工许可证",],},//饼图数据配置项series: [{type: "pie",//echarts类型指定，这个type决定当前的图表是饼图还是折线图亦或是柱状图radius:"70%", //饼图大小，传数组显示环形,center:["20%", "50%"], //饼图位置,展示在父容器内的位置selectedMode: "single",//选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选,‘single’,‘multiple’,分别表示单选还是多选。itemStyle: {//饼图样式，由于饼图只有一项数据，所以只有一个itemStyle，稍后我们会介绍柱状图，会有多个itemStylecolor: function (params) {//设置饼图颜色-渐变var colorList = [饼图颜色，渐变色{ c1: "#2DC4FF", c2: "#1492FF" },{ c1: "#53DEC4", c2: "#29BA91" },{ c1: "#F77392", c2: "#EC3F59" },{ c1: "#F8DC77", c2: "#E5981D" },{ c1: "#CC2CB7", c2: "#FF5AE6" },{ c1: "#1FA9B7", c2: "#62FAFF" },];// 设置饼图渐变色return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上offset: 0,color: colorList[params.dataIndex].c1,},{offset: 1,color: colorList[params.dataIndex].c2,},]);},},label: {//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等show: this.pieData.lableLine,//是否显示饼图上的指示线formatter: "{c}",//饼图上展示数值},data: [//饼图数据{name: "企业投资项目备案表/政府投资项目可行性研究报告批复",value: 24,},{ name: "建设用地规划许可证", value: 31 },{ name: "建设工程设计方案确认书", value: 19 },{ name: "政府投资项目初步设计批复", value: 11 },{ name: "建设工程规划许可证", value: 3 },{ name: "建筑工程施工许可证", value: 2 },],emphasis: {//高亮状态的扇区和标签样式。（鼠标移入时，饼图的样式配置项，可设置阴影样式，以及文字加粗颜色还有文字大小等等）itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},],};this.myPieChart.setOption(option);//setOption这个api是echarts内置的api},},
};
</script>
<style lang="scss" scoped>
.companyList-ctn {width: 260px;border-radius: 4px;margin-bottom: 10px;background: white;.companyList-oneItem {display: flex;justify-content: space-between;align-items: center;}
}
</style>

2.下面介绍另一种饼图数据，也就是饼图的类目展示数值的百分比，这就用到了echarts的富文本api

<template><div class="companyList-ctn" :style="{ 'width': width }"><div :id="id" :style="{'width':'100%','height': height}"></div></div>
</template>
<script>
//创建echarts的初始化id
let _c = { id: 1 };
//导入echarts包，导入echarts包使用require,为何不使用import
let echarts = require("echarts");
export default {created() {_c.id++;this.id = "c_pie_" + _c.id;//动态创建饼图的id选择器，由于id的唯一性},props: {pieData: {type: Object,},},data() {return {myPieChart:'',//声明一个变量来接收echarts初始化的实例width:'100%',height:300+'px'};},mounted() {// 初始化echartsthis.$nextTick(()=>{this.initChart();})// 监听浏览器窗口变化初始化echarts，也就是当浏览器可视区域改变，让图表自适应window.addEventListener('resize',this.initChart,false);},//vue组件实例销毁之前移除监听事件，避免当我们切换路由时导致vue出现警告：//echarts.js?1be7:2160 Uncaught Error: Initialize failed: invalid dom.beforeDestroy () {window.removeEventListener('resize', this.initChart)},methods: {initChart() {//获取dom插入echarts图表var chartDom = document.getElementById(this.id);//在每次初始化实例之前先清除上一次创建好的实例，以便数据是最新的，避免数据错乱if (this.myPieChart != null && this.myPieChart != "" && this.myPieChart != undefined) {this.myPieChart.dispose();//销毁}//echarts初始化方法this.myPieChart = echarts.init(chartDom);let _this=this// 监听页面变化图表自适应this.myPieChart.resize()//echarts配置项var option = {tooltip: {//提示框浮层的位置，trigger: "item",//默认不设置时位置会跟随鼠标的位置。},legend:{//饼图图例配置项// 类目位置orient: "vertical", //类目排列显示top: "center", //类目位置left: 40 + "%", //类目位置icon: "circle", //类目形状，默认圆角矩形itemWidth: 10, //类目原型宽度itemHeight: 10, //类目原型高度textStyle: {//区别在于这里，（name,val,persent这三个字段对应的是设置formatter方法里面的样式）rich: {//富文本格式的样式类目设置name: {verticalAlign: 'left',fontSize: 14,align: 'left',lineHeight: 15,color: "#333333",width: 40},val: {fontSize: 14,align: 'left',lineHeight: 15,color: "#333333",width: 40},persent: {fontSize: 14,align: 'left',lineHeight: 15,color: "#333333",width: 40}}},formatter = function (name) {//如果数据是在父组件传给子组件的话，可把这段代码提出来放在父组件的monted钩子里面执行var data = this.series.data;var total = 0;var tarValue;for (var i = 0, l = data.length; i < l; i++) {total += data[i].value;if (data[i].name == name) {tarValue = data[i].value;}}var persent = _this.$keepTwoFloat(tarValue, total);let arr = ['{name|' + name + '}{val|' + tarValue + '}{persent|' +persent+ '%}'];return arr.join('\n')},data: [//类目数据"企业投资项目备案表/政府投资项目可行性研究报告批复","建设用地规划许可证","建设工程设计方案确认书","政府投资项目初步设计批复","建设工程规划许可证","建筑工程施工许可证",],},//饼图数据配置项series: [{type: "pie",//echarts类型指定，这个type决定当前的图表是饼图还是折线图亦或是柱状图radius:"70%", //饼图大小，传数组显示环形,center:["20%", "50%"], //饼图位置,展示在父容器内的位置selectedMode: "single",//选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选,‘single’,‘multiple’,分别表示单选还是多选。itemStyle: {//饼图样式，由于饼图只有一项数据，所以只有一个itemStyle，稍后我们会介绍柱状图，会有多个itemStylecolor: function (params) {//设置饼图颜色-渐变var colorList = [饼图颜色，渐变色{ c1: "#2DC4FF", c2: "#1492FF" },{ c1: "#53DEC4", c2: "#29BA91" },{ c1: "#F77392", c2: "#EC3F59" },{ c1: "#F8DC77", c2: "#E5981D" },{ c1: "#CC2CB7", c2: "#FF5AE6" },{ c1: "#1FA9B7", c2: "#62FAFF" },];// 设置饼图渐变色return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上offset: 0,color: colorList[params.dataIndex].c1,},{offset: 1,color: colorList[params.dataIndex].c2,},]);},},label: {//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等show: this.pieData.lableLine,//是否显示饼图上的指示线formatter: "{c}",//饼图上展示数值},data: [//饼图数据{name: "企业投资项目备案表/政府投资项目可行性研究报告批复",value: 24,},{ name: "建设用地规划许可证", value: 31 },{ name: "建设工程设计方案确认书", value: 19 },{ name: "政府投资项目初步设计批复", value: 11 },{ name: "建设工程规划许可证", value: 3 },{ name: "建筑工程施工许可证", value: 2 },],emphasis: {//高亮状态的扇区和标签样式。（鼠标移入时，饼图的样式配置项，可设置阴影样式，以及文字加粗颜色还有文字大小等等）itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},],};this.myPieChart.setOption(option);//setOption这个api是echarts内置的api},},
};
</script>
<style lang="scss" scoped>
.companyList-ctn {width: 260px;border-radius: 4px;margin-bottom: 10px;background: white;.companyList-oneItem {display: flex;justify-content: space-between;align-items: center;}
}
</style>

饼图和环形图的配置基本上就结束了，环形图跟饼图类似，本质上就是改变饼图的大小，单个值变为数组，series.radius:[40%,60%]，数组的第一个值是环形图内圈的大小，第二个值是外圈的大小

其他图标请参见第二篇博客

vue项目中使用echarts完成图表类的开发之饼图，环形图相关推荐

echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
在Vue项目中使用echarts完成迁徙图（Map组件）
在Vue项目中使用echarts完成迁徙图此章个人理解:参考原有的代码基础上,完成了一个地图迁徙的组件先了解一下整体代码, 有能力的可以参照整体完成, 下面也会列出详细步骤解答代码我放在了gith ...
如何在 Vue 项目中使用 echarts
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
如何在 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实现词云
0.先上效果图 1.安装插件 -- vue项目中 npm install echartsnpm install echarts-wordcloud 2.vue页面中引入组件 <word-clou ...
在vue项目中使用echarts中的dataset制作多维度的柱状图
1.背景公司给我分配了一个任务是做一个大屏项目,类似于监控中心那种.页面内容比较简单,最下面是两个柱状图,柱状图是多维度的,而我也是第一次在项目中使用echarts,记录一下此次过程. 2.开始 2 ...

vue项目中使用echarts完成图表类的开发之饼图，环形图

vue项目中使用echarts完成图表类的开发之饼图，环形图相关推荐

最新文章

热门文章