123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205 |
- export default function getData() {
- //声明数据
- var chartData = [{
- name: '部门名称1',
- value: 50,
- test: '备注1' //自定义参数
- },
- {
- name: '部门名称2',
- value: 60,
- test: '备注2'
- },
- {
- name: '部门名称3',
- value: 66,
- test: '备注3'
- },
- {
- name: '部门名称4',
- value: 72,
- test: '备注4'
- },
- {
- name: '部门名称5',
- value: 80,
- test: '备注5'
- },
- {
- name: '部门名称6',
- value: 88,
- test: '备注6'
- },
- {
- name: '部门名称7',
- value: 96,
- test: '备注7'
- },
- {
- name: '部门名称8',
- value: 100,
- test: '备注8'
- }
- ];
- var itemValue = [],
- bgData = []; //声明背景数据
- // 取出所有数据最大值,作为柱形图背景数据
- chartData.forEach(function(items, index) { //console.log(items)
- itemValue.push(items.value);
- });
- let maxdata = Math.max.apply(null, itemValue); ///applay方法★取得最大值
- //console.log("最大值为 %c"+ maxdata, "color:red");
- for (var i = 0; i < chartData.length; i++) {
- bgData.push(maxdata); //取得最大值
- }
- console.log(bgData);
- //图表
- return {
- title: {
- show: false
- },
- tooltip: {
- show: false,
- trigger: 'axis', // axis , item
- axisPointer: {
- type: 'shadow' // 'line' | 'shadow'
- },
- //backgroundColor:'transparent',
- padding: 0,
- textStyle: {
- fontSize: 16,
- fontFamily: 'Simsun',
- color: '#fff'
- },
- },
- legend: {
- show: false
- },
- toolbox: {
- show: false
- },
- grid: {
- top: '0',
- left: '0',
- right: 30,
- bottom: '0',
- containLabel: true
- },
- xAxis: [{
- type: 'value',
- position: 'bottom',
- boundaryGap: true, // 边界间隙
- min: 0,
- axisLabel: {
- show: false,
- textStyle: {
- color: '#fff',
- fontSize: 16
- }
- },
- axisLine: {
- show: false,
- lineStyle: {
- color: 'rgba(255, 255, 255, .5)'
- }
- },
- axisTick: {
- show: false // 坐标轴小标记
- },
- splitLine: {
- show: false, // 是否显示分割线
- lineStyle: {
- color: 'rgba(255, 255, 9255, 0)', // 纵向向网格线颜色
- type: 'dashed',
- width: 1
- }
- }
- }],
- yAxis: {
- type: 'category',
- position: 'left',
- axisLabel: {
- textStyle: {
- color: '#8aa5ab',
- fontSize: 15
- }
- },
- axisLine: {
- lineStyle: {
- color: 'rgba(255, 255, 255, .5)',
- width: 1
- }
- },
- axisTick: {
- show: false // 坐标轴小标记
- },
- splitLine: {
- show: false
- },
- data: (function(data) {
- var arr = [];
- data.forEach(function(items) {
- arr.push(items.name);
- });
- return arr;
- })(chartData) // 载入y轴数据
- },
- series: [{
- type: 'bar',
- barGap: "-100%",
- label: {
- normal: {
- show: false
- }
- },
- barWidth: 27,
- itemStyle: {
- normal: {
- color: '#1a2859' // 图表颜色
- }
- },
- data: bgData, // 载入背景数据
- z: 0
- }, {
- type: 'bar',
- label: {
- normal: {
- show: true,
- position: 'right', // top, right, inside, insideTop,...
- textStyle: {
- color: 'white',
- fontSize: 16
- },
- formatter: '{c}' + "%"
- /*formatter: function(params) { console.log(params)
- var strVal = 0;
- chartData.forEach(function(v, i, array) {
- if (params.name == v.name) {
- strVal = v.value;
- params.data = v.test
- }
- })
- return strVal + '%';
- }*/
- }
- },
- barWidth: 27,
- itemStyle: {
- normal: {
- //color:'#ffc938', // 图表颜色
- color: function(params) { // 颜色定制显示(按顺序)
- var colorList = ['#ea9ef3', 'yellowgreen', '#4a5eea', '#00a0e9', '#8957a1', '#80f1b0', '#ff6692', '#f29b76'];
- return colorList[params.dataIndex]
- },
- //barBorderRadius: [0, 17, 17, 0] //圆角
- }
- },
- data: chartData, // 载入数据(内含自定义参数)
- z: 1
- }]
- };
- }
|