echarts饼状图表

$(function () {$("#jqGrid").jqGrid('clearGridData');  //清空表格$("#jqGrid").jqGrid({// url: '/gdjt/yw/revueneExpenditure/list',url:'/gdjt/operCost/getListPage?limit=10&page=1',datatype: "json",postData:{'year': '', // 年份'subway': '' // 每页大小},colModel: [{ label: '序号', name: 'id',align:'center', width: 6 },{ label: '操作', name: '',  width: 10, align: 'center',formatter: function (cellvalue, options, rowObject) {var item = JSON.stringify(rowObject)// var dtail='<input type=\'button\' value=\'查看\' class=\'see-but\'  onclick=\'vm.queryDateils('+ item +')\'>';var dtail='<input type=\'button\' value=\'查看\' class=\'see-but\'  onclick=\'vm.queryDateils('+ item +')\'>';return dtail;}},// 年度{ label: '年度', name: 'year',align:'center', width: 15 },{ label: '项目', name: 'projectName',align:'center', width: 12},{ label: '工资及社会福利金', name: 'gzjshflj',align:'center', width: 14 },{ label: '车辆维修费', name: 'clwxf',align:'center', width: 14 },{ label: '牵引电力', name: 'qydl',align:'center', width: 14},{ label: '生产消耗费', name: 'scxhf', align:'center', width: 15 },{ label: '企业管理费', name: 'qyglf', width: 15 },{ label: '基本折旧资', name: 'jbzjf', align:'center', width: 15 },{ label: '车公里成本', name: 'cglcb', align:'center', width: 15 }],viewrecords: true, // 是否要显示总记录数信息height: 401, // 表格高度rowNum: 10, // 设置表格可以显示的记录数rowList : [10,30,50], // 可以改变表格可以显示的记录数rownumbers: false, // 如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增。rownumWidth: 60, // 如果rownumbers为true，则可以设置column的宽度autowidth:true, // 如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth//multiselect: true, // 定义是否可以多选pager: "#jqGridPager",jsonReader : {root: "page.list",page: "page.currPage",total: "page.totalPage",records: "page.totalCount"}})
})
var vm = new Vue({el:'#rrapp',data:{list:[],listFirst:[],pielist:[],showDateils:1},created(){this.getlist();// this.queryDateils();},methods:{getlist:function(){$.get('/gdjt/operCost/getListPage?limit=10&page=1',function(result){vm.list=result.page.list;vm.listFirst=result.page.list[0]data = [{value: vm.listFirst.gzjshflj, name: '工资及社会福利会'},{value: vm.listFirst.clwxf, name: '车辆维修费'},{value: vm.listFirst.qydl, name: '牵引电力'},{value: vm.listFirst.scxhf,name: '生产消耗费'},{value: vm.listFirst.qyglf, name: '企业管理费'},{value: vm.listFirst.jbzjf,name: '基本折旧资'},{value: vm.listFirst.cglcb, name: '车公里成本'}];vm.pielist=data;console.log(vm.listFirst.gzjshflj,vm.listFirst.clwxf,"vm.listFirst");})},findkan:function(item){console.log("编辑",item);},// 点击查看queryDateils(item){// debugger//console.log(item,"item");SetEcharts(item)vm.showDateils=false },}})
var myChart = echarts.init(document.getElementById('echartBar'));
function SetEcharts(data)
{console.log(data,"data");// debuggervar _data=[{value:data.cglcb,name:"工资及社会福利会"},{value:data.clwxf,name:"车辆维修费"},{value:data.qydl,name:"牵引电力"},{value:data.scxhf,name:"生产消耗费"},{value:data.qyglf,name:"企业管理费"},// {value:data.jbzjf,name:"基本折旧费"},{value:data.jbzjf,name:"基本折旧费"}];var option = {title: {text: '2019轨道一期成本分析',left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {// orient: 'vertical',// top: 'middle',bottom: 10,left: 'center',data: ['工资及社会福利会', '车辆维修费', '牵引电力', '生产消耗费', '企业管理费','基本折旧费','车公里成本']},color : [ '#1a6ac5', '#438035', '#ffc62e', '#ff522c','red'],series: [{type: 'pie',radius: '65%',center: ['50%', '50%'],selectedMode: 'single',data: _data,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}

echarts饼状图表相关推荐

echarts饼状图的使用
echarts饼状图的使用地址:https://echarts.apache.org/zh/index.html 第一步: 通过 npm 获取 echarts, npm install echart ...
ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比简单的实现可以参考: export default {data() {return {}},mounte ...
去掉Echarts饼状图的引导线
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>五分钟 ...
echars ajax 饼状图,echarts饼状图实现方法
当前位置:我的异常网» Web前端 » echarts饼状图实现方法 echarts饼状图实现方法 www.myexceptions.net 网友分享于:2015-09-27 浏览:0次 echa ...
echarts饼状图引导线加圆点
实现echarts饼状图引导线加圆点实现思路: 1.首先我们在series里设置三个饼状图,设置共有的数据来防止页面交互显示错位问题设置minAngle 最小区域扇面角度防止多个数据为0时候引导线会 ...
python立体感的饼状图如何做_AI教程：如何制作3D立体饼状图表？
原标题:AI教程:如何制作3D立体饼状图表? 辛辛苦苦分析一堆大数据,竟然没人看!到底怎么办?俗话说,有图有真相,一图胜千言,取悦了眼球,剩下的都好说.如果你正着手于从数据中洞察出有用信息,那你所需要 ...
echarts饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
Angular2组件与Echarts饼状图交互之饼图制作
一.前言 1.基于ng4项目 2.组件包括:根组件app和饼状图组件echart 二.饼状图开发过程 1.添加插件 echart cnpm install echarts --save 2.创建组件 ...
Echarts饼状图数据动态获取
首先肯定是引入echarts的相关jar包,地址:https://www.echartsjs.com/zh/download.html 你可以引入在线定制生成的jar包,如下图所示: 然后接下来就自己 ...

echarts饼状图表

echarts饼状图表相关推荐

最新文章

热门文章