Echarts饼图之数据展示

1、组件简介

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

官网链接：Echarts官网
W3C教程：W3C–Echarts教程

2、前端代码实现

首先，下载库，并引入到项目文件；

话不多说，直接上代码。

/* 封装的组件 HTML代码
<div class="echart-wrap-box"><div class="echart-content"></div>
</div>
*/
let echarts = require("echarts/echarts.min");defaults: {option: {echartsObj: {},tooltip: {//提示框浮层内容。trigger: 'item',//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。formatter: "{b} : {c}万人"//提示框浮层内容格式器,{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）},//如果系列没有设置颜色，则会依次循环从默认列表中取颜色作为系列颜色。color: ["#369DFD", "#32C8CA", "#49C872", "#F6CE36", "#EE607A", "#935CE3", "#3436C7", "#3E4D86"],legend: {//图例组件。orient: 'vertical',//图例列表的布局朝向:垂直的x: '80%',//图例组件离容器左侧的距离。y: '60%',//图例组件离容器上侧的距离。// width: 100,textStyle: {},//图例文字的样式// left: 'right',//图例组件离容器左侧的距离。top: 'center',//图例组件离容器上侧的距离。data: [],//右侧图例小组件信息数据},series: [{//饼图信息name: '',type: 'pie',//饼状图radius: 140,//饼图的半径。center: ['50%', '50%'],minAngle: 5,  //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互label: {//展示文本设置normal: {show: true,formatter: "{b} : {c}万人",//视觉引导线内容格式器,{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）},emphasis: {    //文本样式show: true,    //展示textStyle: {    //文本样式fontSize: '16',fontWeight: '600',}}},labelLine: {//视觉引导线设置normal: {show: true}},data: [],//饼状图信息数据,value(数量)和 name为默认数据；itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}],},onInit(event) {vm = event.vmodel;            let data;//假设这里通过ajax获取到了需要展示的数据；if (data.length == 0) {return}data = data.sort((a, b) => { return b.number - a.number });//数据根据数量number从大到小排序if (data.length > 7) {//从大到小的第八个新增粉丝数量的年份 开始统一归为 其他年份新增粉丝数量let arr = data.slice(7);let num = 0, rate = 0;for (let i = 0; i < arr.length; i++) {//第七个之后累数量和比率num += Number(arr[i].number);rate += Number(arr[i].rate);};let objOtherYear = {value: num,name: '其他年份__nana新增粉丝数量',rate: rate};let arr2 = data.slice(0, 7);arr2.push(objOtherYear);data = arr2;data = data.sort((a, b) => { return b.number - a.number });//数据根据数量number从大到小排序}this.option.series[0].data = [];this.option.legend.data = [];for (let i = 0; i < data.length; i++) {let seriesData = {value: 0,name: '',rate: ''};seriesData.value = data[i].number;seriesData.name = data[i].year;seriesData.rate = data[i].rate;this.option.series[0].data.push(seriesData);//给饼图赋值数据let legendData = {name: '',icon: 'circle',//强制设置图形为:圆形textStyle: {color: '#000'}}legendData.name = data[i].year;this.option.legend.data.push(legendData);//给图例组件赋值数据}},callFun: avalon.noop,//点击饼状图后的回调isClickEchartsOUt: avalon.noop,//是否为饼图外的点击，父组件进行判断后传过来onReady(event) {this.echartsObj = echarts.init(event.target.children[0]);//初始化this.echartsObj.setOption(this.option);$(window).resize(() => {this.echartsObj.resize();});let dataIndex;//保存选中扇区的序号let _this = this;this.$watch('isClickEchartsOUt', () => {if (this.isClickEchartsOUt) {//如果不是饼状图扇区的点击，则取消选中；_this.echartsObj.dispatchAction({type: 'pieUnSelect',//取消选中指定的饼图扇形。// 可选，系列 index，可以是一个数组指定多个系列seriesIndex: 0,// 可选，数据的 indexdataIndex: dataIndex,})}});// 处理点击饼图内部的事件this.echartsObj.on('click', function (params) {if (params.dataIndex != dataIndex) {//如果不是前一次选中的扇区，则取消选中_this.echartsObj.dispatchAction({type: 'pieUnSelect',//取消选中指定的饼图扇形。// 可选，系列 index，可以是一个数组指定多个系列seriesIndex: 0,// 可选，数据的 indexdataIndex: dataIndex,})}dataIndex = params.dataIndex;_this.echartsObj.dispatchAction({type: 'pieSelect',//选中指定的饼图扇形。// 可选，系列 index，可以是一个数组指定多个系列seriesIndex: 0,// 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据dataIndex: dataIndex,})vm.callFun(params);//回调，传点击获取到的数据给父组件});},onDispose() {}}

3、效果图

根据人数大小按顺时针方向从大到小排列，由大到小排序后的第八个开始统一为其他年份，再次排列；

Echarts饼图之数据展示相关推荐

WebGIS中利用AGS JS+eCharts实现一些数据展示的探索
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eCharts提供了迁徙图.热点图.夜视图等跟地图能够很好的 ...
实现Java Web开发的关于echarts可视化动态数据展示
实现Java Web开发的关于可视化动态数据展示 echarts是一个实现动态数据展示最方便的图形化展示工具.它能够完成数据实时传递更新并且能够完成页面直观的展示.最开始时,echarts是由百度设计 ...
在Vue中使用Echarts地图以及数据展示
效果图如下(东营市地图) 1.地图显示首先要获取该地区的JSON数据,网站:DATAV.GeoAtolas,逐步选择地图区域,然后复制数据到本地另存为dy.json. 直接上代码了,添加了详细备注 ...
基于VUE+Echarts大屏数据展示150套 (集合)
基于echarts 24种数据可视化展示，填充数据就可用，动手能力强的还可以DIY（演示地址+下载地址）
基于echarts 24种数据可视化展示,填充数据就可用,动手能力强的还可以DIY(演示地址+下载地址) 前言演示地址下载地址 Demo示例(部分) 1.总览 2.物流信息展示 3.车辆综合管控平 ...
echarts饼图百分比的直接展示
引用echart的版本不一样,写法也存在差异 <div id="wraper" style="width: 1100px;height: 500px;backgro ...
基于 Echarts 实现可视化数据大屏展示(150套)
基于 Echarts 实现可视化数据大屏展示(150套) 基于 Echarts 实现可视化数据大屏响应式展示效果的源码, 代码质量高,可以在此基础上重新开发. 作品介绍 1.网页作品简介方面 :本项目 ...
echarts 饼图移动端_echarts饼图--数据交互
/*饼图鼠标经过时模块放大功能 */ // 路径配置 require.config({ paths: { echarts: 'js/' } }); // 使用 require( [ 'echarts ...
移动端不利用HTML5和echarts开发一样可以实现大数据展示及炫酷统计系统（产品技术综合）...
一.由于项目需要进行手机看板展示设计及开发展示效果图如下: 上图为概况(点击相应模块进入详情页面) 上图为运营统计(一些统计类图标状图折线图等......) 车辆分布状况(展示在地图上分布) 上图为点 ...

Echarts饼图之数据展示

Echarts饼图之数据展示

1、组件简介

2、前端代码实现

3、效果图

Echarts饼图之数据展示相关推荐

最新文章

热门文章