3d柱状图2
预览图：
import React, { Component } from 'react'; import * as echart from 'echarts'; import { compare } from '@/utils/tools'; import style from './index.less';
/** * 3D柱状图 * @param {string[]} xAxis X轴数据 * @param {string} barColor 柱状颜色 * @param {object[]} barData 柱状数据 * @param {number} barWidth 柱状宽度 * @param {number|number[]} barBorderRadius 柱状圆角 * @param {Object} optionObj * */ class ManyPie extends Component { constructor(props) { super(props); this.chartRef = React.createRef(); } chartRef; chart;
componentDidUpdate() { this.init() }
componentDidMount() { this.init() }
init() { // 基于准备好的dom，初始化echart实例 if (this.chart != null && this.chart != "" && this.chart != undefined) { this.chart.dispose();//解决echarts dom已经加载的报错 } // 基于准备好的dom，初始化echart实例 this.chart = echart.init(this.chartRef.current, null, { devicePixelRatio: 2.5 }); this.chart.clear(); this.setOptions();
window.addEventListener("resize", () => { this.chart.resize(); }); } barColor = ['#41C6E8', '#F5D66E', '#95D171']; barData = [ { x: "Sun", value: 22 }, { x: "Mon", value: 18 }, { x: "Tue", value: 19 }, { x: "Wed", value: 23 }, { x: "Thu", value: 29 } ] xAxis = ['示例街道一', '示例街道二', '示例街道三', '示例街道四', '示例街道五'] setOptions() { const { title = false, subtitle = '', xAxis = this.xAxis, barColor = this.barColor, barWidth = 4, barData = this.barData, barBorderRadius = [10, 10, 0, 0], optionObj = {} } = this.props;
var mid = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAD6CAYAAAAbZO+fAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUQ5OTNGMTBBQzIyMTFFQUFCNjFCRjdFNDdGNzcyQkEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUQ5OTNGMTFBQzIyMTFFQUFCNjFCRjdFNDdGNzcyQkEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRDk5M0YwRUFDMjIxMUVBQUI2MUJGN0U0N0Y3NzJCQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRDk5M0YwRkFDMjIxMUVBQUI2MUJGN0U0N0Y3NzJCQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnVeLVEAAAQGSURBVHja7J3dahRBEIW72gVBCORV9UF8Ad/OK++UEDAgbtnjJhB350Kiez5SdQYmF8Nuek9XV9Wpn+6JzBzVrzkaXAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAb5Cq8D/QPiw799Pz/+BUjFIOSkbb8vxntk43aIxskN5AEYeBsnO+ikTJLPQYZYksrJzAMyeEiBLkmmGKQY4LlOljc8AehKaevaxPCAkqzoQiCdDL19rS7JYPxkEmSgNq3DlmsL6yrXfz3I6KGTXq7XDLW2QTXpyST8pK2rQb78mtWta3Twk9nBup5gzuo6GaMBrUvTuisv11kQJMZ4krSuKhcSHZbrBhNxIdqUZAOdVBs5YLlmB8MDM54pGpYwPCme3QCWq97wTKHhiXMXohr4CBieFAfNEVQUovZd2HINETyCu6Z2do8c46kqyYtKs252ITKgJuhYjkelk8qUZDCSnFLGA0lyk2UwhkcJ8g0gSTWt4wyP0oWgUYiytw6LQipKErOuQS1XdWYAiUK0sxucJAvrZIqzdU0KPpjh0Q0cv8Pm6rQu1zhRnKAHRwZ0OplSnbzwkyHUyeJVLf1Yf/hJ0XLNFTRHee6KBc1VueuFn6zoQqj6ZGIEXch4pOkPrNLcgPEMlvEUTknqD1MgNqSpJZmYCxnDedf/6kIInVRXmhPdJFrehVTVyU7ZOuIwhfq1kESrWpX95FEvyWC4q5qguz37CjoJFGEbBM0T0El5cnnU18no0uISXCto5cYIedCMcVdl0NykMWK6nF7AT45jC+46RgPuOqkt+OrZbdHUq+7IKu0nMUnOBtw1W0QhAHdN+cBYqOXGiFccal1IUuVCsKBZJ8lAeusGoZPIctXpyYlhVZdkEEGzOgrJIJuVdN0fLWohTapaDV6KUr7SnB2alSKxlKRaT8q3uKDnDAj3T9andQRBV4NM1LpWzvHI40nlhPYzPNr0B2h4KuokROtO1rXFa+CKpz969PEMNAqpeGAmtgUfO8RWma0DyIDe8DQgA+BOWCUZQIuwFfdqgdy1vOFp4kIGeWx/YYI+5Mt1NliuSBSCDIwd2185/aE2Bom+SqP8u9OF57tmg3J6RIflSmwSJU6MaFDwabONqUXbWXVJcuX04stVzl3ZM7LKZ9CFfjLDOllkubbIDDTQyeBO6lVfxV9GnfoZBXSyBXcdLRJZLdrO5Mt1jgbXkyQ/r/vTs2c3OzN/u/P92x2p3Oy4pnfrfnv6T/GwvvHt8fnDur+fffbHuu/Pnv1c993O+F93nt09fn67vmx/fgkwAL7BwWEFvy6OAAAAAElFTkSuQmCC" var top = "data:image/png;base64,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" var bottom = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAARCAYAAAB5LjRtAAABfUlEQVRIidXXv0tWURjA8Y/v6B/g0iqIWZoE4RhoW2Y0iRDNDs1hRIuI4uzgHEGjaLX1i2gLx8gc+rUoTgqRoKBy4ByRF3299/WeV/2O956H53zvc859zmkz8uUmPqNdbq50fNLbeTt7HrYwUMMyrmKpBUlbwSt0Y6UWk/3BCO7h9yWV+oEhjGEtPKjVDXgdqziNnfOZY2m28Qy9eH80uF5OHPwUffhwMX0OeYMeTB1XjOPkEiuxzA+x3pKpFucv7mMYv06KaiQX2MfLuEHnsHdOMoldzMZqLZ42+DS5xCYe4xa+VjXTkoR21Y8n+FcktKhcIrSNAYxH4VawgUcI/fFbmXxl5cSlOY8uvIhLNwdnztOMXKLpL1qASlbIWeQSpfdCAyrd21XIqfuLLTQRn+WvXJVcIvSfB7iLnwVjvmMwRz+tWi7xFtcw2eAY9x8TuIGPOSaRS048xj3Hdbyre7cUz7AzOc+wOeUSq7iDUbW2sGzDzSPcQMJNJB84AMF1UlvRkcWRAAAAAElFTkSuQmCC" var bottom1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAhCAYAAAB9VDPAAAAE90lEQVRYhc2Z2VMVRxTGf91wBRFZBARRWVyCGzhRTGWxjFYSs/4HectL8h+RV59SleckVhaTMpqlSjCNJioagSuCylIgyKIXulM9d5Se4V5EM3P1q7oPdE/36Y/uc853ugVfLlEQKNkAHAF+x9MTcZk0n8u8fcWJ81KyBDgBvAbYlXgoeR44j6czSZpOlpyS+4EPgI1OaxHwNtCOkqfx9I2kzCdDTska4CNgZ6hdMI9hffDXJuBTlLwCfI+n78e9jHjJKZkC3gKOhuaWzFNp/qLJpBkUO5kWBzGUBL37gF0oeRb4A0/ruJYTX0BRclewW5ucVs16btCsL1PKsn/NUsKQ9Fig1V/DMkaBb/F0eq1mVwso/5+ckhWBX+0LtRczQb25QJ2ZzDv2rqhlTBxhiSp3vUAv8COenn2a+WTIKWlnfR04DqxzZnxIhemlxdwM7Uk+aAQDoo0Hoh0TcpN54AzQg6dN4cgp2QR8DNS7dihhgCat2MDDZ55zWpRxW7zKI5oiPcPAN3j6Tq5h8ZFTsgw4CRwM+UoRU9SZbhrM2Nony4NhsYUJcRgdSh82yFwAfsHTC/GSU9ISOQS8C09CuR29SLm5TKvpQ5L36DwzMhQxKPcy6/txkTN8BvgBT1+Oh5ySW4IjuC3Uvo4htpmLVJi52EhFMSnKGRGdZNgS6ekHvsPT489HbqVsykLygBrTw1YzkgSfnLgltjMlDqEpc7rtwn8Dzpkucsq43OSUPAC8H5FNS2zgKi36CikKpLYdPKSYQdnOPK+E/tlgU81p08X16JAwuaxsskdwR+irFHdpNN1Um5kC0Fgd46KKu6KTReoi310LSD6RcVlyWdl0NPgtO7CVTVXmIk3m1gsn5cKGrkGxg2nhOTLO4hHwq5VxposlwRemFPgM2ByaoIhJduszIdn0ssHKuJvyJJryyMqGgFMyyBtfQeTMLlHNv/IY46LypSQ2KjbRL4/nIGbTxNemi8Woz+0BPgRcQjZG9dGs/6aExUKtPS/mSZGWB1lgV0R0j9v0YLr8NOFjZbRU0urEY8AbEf+bo9r0sN3cfiGkrJ+lRSv3fT8rdXqs25yzacH6mTtktTxXF0TOllB7ihG2mh6qzINESOTChKjkjh8hN0d6rwcRMmflsbpCycquDuA9cM62YIky/qFVX6WY2IrLFbC5LS0PMEdbJLfZcG+vKK7FoS3tMXgH6Aydc8k0taabRnMvTk4+hsQ2Jn1VssFptYv9EziLp23Yj7UqaAQ+ARpD7etIs91cZKNZyDt2rZgS5QyLw2QiNiAdVOm2Wn+CeOu57FHtDHZy2bEFGcrNJVrNjeeqEBaRDMi9zLEfE6oEZv1KAC7lKlqTqsTLA1/siNR2k2w23dSb8TXPNSLqGRedaCrcdftVOPwUreFcJH2H0hJEVVfr2WB9kybdS5kviXJjRpQyJA7xiOYo3eAIDj/NfLLk8AkWBXnx2Ir7lEqjaDb9oXRr700GxW5mRAeGlNNjd+hnv+pe5d7ERfLkHkPJykDh7Am1FzNGg+mm1kxxT9Qw6t94VTtfmEA22Sr7mfJn4cg9hpJtAUn3yk6TYpSMf6nk7uNYUFUPPI+pwj+EeLoPJfuDY/pmIOMkGRqcrzJ+vsreMidS/Cb3EJJ9wTmDkr1BwGl1evsChTGVmP2CPGF52qaEUyhpU4a9jznn72zSAP4DgajQfVl1LbUAAAAASUVORK5CYII="
var x = [] var y = [] var imgList = []
barData.forEach((item, index) => { x.push(item.x) y.push(item.value) imgList.push({ coord: [index, item.value], symbolSize: [22, 12], symbolOffset: ['23.5%', 0], symbol: "image://" + top, value: item.value, label: { show: true, offset: [0, -30], fontSize: 16, color: "#00baff", formatter: function (params) { return params.value + '%' } } }, { coord: [index, 0], symbolOffset: ['23.5%', 2.37], symbolSize: [22, 6], symbol: "image://" + bottom, itemStyle: { opacity: 0.8 } }, { coord: [index, 0], symbolOffset: ['22%', 0], symbolSize: [22, 12], symbol: "image://" + bottom1, itemStyle: { opacity: 0.8 } }) })
var option = { title: { text: 'Awesome Chart' }, xAxis: { show: false, offset: 20, interval: 20, data: x, axisLabel: { color: '#fff' }, axisLine: { show: true }, splitLine: { show: false }, axisTick: { show: false } }, yAxis: { show: false, axisLine: { show: true }, splitLine: { show: false }, axisTick: { show: false } }, series: [{ z: 1, type: 'bar', barWidth: 10, symbolOffset: [0, -8], data: y, offset: 10, itemStyle: { normal: { borderColor: new echart.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(0, 79, 197, 0.2)', }, { offset: 1, color: 'rgba(0, 79, 197, 1)', }, ]), color: { x: 0, y: 1, x2: 0, y2: 0, colorStops: [ { offset: 0, color: 'rgba(0, 79, 197, 1)' }, { offset: 1, color: 'rgba(0, 79, 197, 0)' } ] }, opacity: 0.8 } }, markPoint: { data: imgList } }, { z: 1, type: 'bar', barWidth: 10, barGap: '-3%', symbolOffset: [0, -10], data: y, offset: 10, itemStyle: { normal: { borderColor: new echart.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(0, 79, 197, 0.2)', }, { offset: 1, color: 'rgba(0, 79, 197, 1)', }, ]), color: { x: 0, y: 1, x2: 0, y2: 0, colorStops: [ {offset: 0, color: 'rgba(0, 154, 255, 1)'}, {offset: 1, color: 'rgba(0, 154, 255, 0)'} ] }, opacity: 0.8 } } }] };
// 绘制图表
// mergeJSON(option, optionObj); // console.log(option, 333, Object.assign(option, optionObj)); this.chart.setOption(option); window.onresize = () => { this.chart.resize(); } }
render() { const { width, height } = this.props; return ( ) } }
export default ManyPie; 参考：http://analysis.datains.cn/finance-admin/index.html#/chartLib/all
import React, { Component } from 'react'; import * as echart from 'echarts'; import { compare } from '@/utils/tools'; import style from './index.less';
/** * 3D柱状图 * @param {string[]} xAxis X轴数据 * @param {string} barColor 柱状颜色 * @param {object[]} barData 柱状数据 * @param {number} barWidth 柱状宽度 * @param {number|number[]} barBorderRadius 柱状圆角 * @param {Object} optionObj * */ class ManyPie extends Component { constructor(props) { super(props); this.chartRef = React.createRef(); } chartRef; chart;
componentDidUpdate() { this.init() }
componentDidMount() { this.init() }
init() { // 基于准备好的dom，初始化echart实例 if (this.chart != null && this.chart != "" && this.chart != undefined) { this.chart.dispose();//解决echarts dom已经加载的报错 } // 基于准备好的dom，初始化echart实例 this.chart = echart.init(this.chartRef.current, null, { devicePixelRatio: 2.5 }); this.chart.clear(); this.setOptions();
window.addEventListener("resize", () => { this.chart.resize(); }); } barColor = ['#41C6E8', '#F5D66E', '#95D171']; barData = [ { x: "Sun", value: 22 }, { x: "Mon", value: 18 }, { x: "Tue", value: 19 }, { x: "Wed", value: 23 }, { x: "Thu", value: 29 } ] xAxis = ['示例街道一', '示例街道二', '示例街道三', '示例街道四', '示例街道五'] setOptions() { const { title = false, subtitle = '', xAxis = this.xAxis, barColor = this.barColor, barWidth = 4, barData = this.barData, barBorderRadius = [10, 10, 0, 0], optionObj = {} } = this.props;
var mid = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAD6CAYAAAAbZO+fAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUQ5OTNGMTBBQzIyMTFFQUFCNjFCRjdFNDdGNzcyQkEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUQ5OTNGMTFBQzIyMTFFQUFCNjFCRjdFNDdGNzcyQkEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRDk5M0YwRUFDMjIxMUVBQUI2MUJGN0U0N0Y3NzJCQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRDk5M0YwRkFDMjIxMUVBQUI2MUJGN0U0N0Y3NzJCQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnVeLVEAAAQGSURBVHja7J3dahRBEIW72gVBCORV9UF8Ad/OK++UEDAgbtnjJhB350Kiez5SdQYmF8Nuek9XV9Wpn+6JzBzVrzkaXAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAZpkAb5Cq8D/QPiw799Pz/+BUjFIOSkbb8vxntk43aIxskN5AEYeBsnO+ikTJLPQYZYksrJzAMyeEiBLkmmGKQY4LlOljc8AehKaevaxPCAkqzoQiCdDL19rS7JYPxkEmSgNq3DlmsL6yrXfz3I6KGTXq7XDLW2QTXpyST8pK2rQb78mtWta3Twk9nBup5gzuo6GaMBrUvTuisv11kQJMZ4krSuKhcSHZbrBhNxIdqUZAOdVBs5YLlmB8MDM54pGpYwPCme3QCWq97wTKHhiXMXohr4CBieFAfNEVQUovZd2HINETyCu6Z2do8c46kqyYtKs252ITKgJuhYjkelk8qUZDCSnFLGA0lyk2UwhkcJ8g0gSTWt4wyP0oWgUYiytw6LQipKErOuQS1XdWYAiUK0sxucJAvrZIqzdU0KPpjh0Q0cv8Pm6rQu1zhRnKAHRwZ0OplSnbzwkyHUyeJVLf1Yf/hJ0XLNFTRHee6KBc1VueuFn6zoQqj6ZGIEXch4pOkPrNLcgPEMlvEUTknqD1MgNqSpJZmYCxnDedf/6kIInVRXmhPdJFrehVTVyU7ZOuIwhfq1kESrWpX95FEvyWC4q5qguz37CjoJFGEbBM0T0El5cnnU18no0uISXCto5cYIedCMcVdl0NykMWK6nF7AT45jC+46RgPuOqkt+OrZbdHUq+7IKu0nMUnOBtw1W0QhAHdN+cBYqOXGiFccal1IUuVCsKBZJ8lAeusGoZPIctXpyYlhVZdkEEGzOgrJIJuVdN0fLWohTapaDV6KUr7SnB2alSKxlKRaT8q3uKDnDAj3T9andQRBV4NM1LpWzvHI40nlhPYzPNr0B2h4KuokROtO1rXFa+CKpz969PEMNAqpeGAmtgUfO8RWma0DyIDe8DQgA+BOWCUZQIuwFfdqgdy1vOFp4kIGeWx/YYI+5Mt1NliuSBSCDIwd2185/aE2Bom+SqP8u9OF57tmg3J6RIflSmwSJU6MaFDwabONqUXbWXVJcuX04stVzl3ZM7LKZ9CFfjLDOllkubbIDDTQyeBO6lVfxV9GnfoZBXSyBXcdLRJZLdrO5Mt1jgbXkyQ/r/vTs2c3OzN/u/P92x2p3Oy4pnfrfnv6T/GwvvHt8fnDur+fffbHuu/Pnv1c993O+F93nt09fn67vmx/fgkwAL7BwWEFvy6OAAAAAElFTkSuQmCC" var top = "data:image/png;base64,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" var bottom = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAARCAYAAAB5LjRtAAABfUlEQVRIidXXv0tWURjA8Y/v6B/g0iqIWZoE4RhoW2Y0iRDNDs1hRIuI4uzgHEGjaLX1i2gLx8gc+rUoTgqRoKBy4ByRF3299/WeV/2O956H53zvc859zmkz8uUmPqNdbq50fNLbeTt7HrYwUMMyrmKpBUlbwSt0Y6UWk/3BCO7h9yWV+oEhjGEtPKjVDXgdqziNnfOZY2m28Qy9eH80uF5OHPwUffhwMX0OeYMeTB1XjOPkEiuxzA+x3pKpFucv7mMYv06KaiQX2MfLuEHnsHdOMoldzMZqLZ42+DS5xCYe4xa+VjXTkoR21Y8n+FcktKhcIrSNAYxH4VawgUcI/fFbmXxl5cSlOY8uvIhLNwdnztOMXKLpL1qASlbIWeQSpfdCAyrd21XIqfuLLTQRn+WvXJVcIvSfB7iLnwVjvmMwRz+tWi7xFtcw2eAY9x8TuIGPOSaRS048xj3Hdbyre7cUz7AzOc+wOeUSq7iDUbW2sGzDzSPcQMJNJB84AMF1UlvRkcWRAAAAAElFTkSuQmCC" var bottom1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAhCAYAAAB9VDPAAAAE90lEQVRYhc2Z2VMVRxTGf91wBRFZBARRWVyCGzhRTGWxjFYSs/4HectL8h+RV59SleckVhaTMpqlSjCNJioagSuCylIgyKIXulM9d5Se4V5EM3P1q7oPdE/36Y/uc853ugVfLlEQKNkAHAF+x9MTcZk0n8u8fcWJ81KyBDgBvAbYlXgoeR44j6czSZpOlpyS+4EPgI1OaxHwNtCOkqfx9I2kzCdDTska4CNgZ6hdMI9hffDXJuBTlLwCfI+n78e9jHjJKZkC3gKOhuaWzFNp/qLJpBkUO5kWBzGUBL37gF0oeRb4A0/ruJYTX0BRclewW5ucVs16btCsL1PKsn/NUsKQ9Fig1V/DMkaBb/F0eq1mVwso/5+ckhWBX+0LtRczQb25QJ2ZzDv2rqhlTBxhiSp3vUAv8COenn2a+WTIKWlnfR04DqxzZnxIhemlxdwM7Uk+aAQDoo0Hoh0TcpN54AzQg6dN4cgp2QR8DNS7dihhgCat2MDDZ55zWpRxW7zKI5oiPcPAN3j6Tq5h8ZFTsgw4CRwM+UoRU9SZbhrM2Nony4NhsYUJcRgdSh82yFwAfsHTC/GSU9ISOQS8C09CuR29SLm5TKvpQ5L36DwzMhQxKPcy6/txkTN8BvgBT1+Oh5ySW4IjuC3Uvo4htpmLVJi52EhFMSnKGRGdZNgS6ekHvsPT489HbqVsykLygBrTw1YzkgSfnLgltjMlDqEpc7rtwn8Dzpkucsq43OSUPAC8H5FNS2zgKi36CikKpLYdPKSYQdnOPK+E/tlgU81p08X16JAwuaxsskdwR+irFHdpNN1Um5kC0Fgd46KKu6KTReoi310LSD6RcVlyWdl0NPgtO7CVTVXmIk3m1gsn5cKGrkGxg2nhOTLO4hHwq5VxposlwRemFPgM2ByaoIhJduszIdn0ssHKuJvyJJryyMqGgFMyyBtfQeTMLlHNv/IY46LypSQ2KjbRL4/nIGbTxNemi8Woz+0BPgRcQjZG9dGs/6aExUKtPS/mSZGWB1lgV0R0j9v0YLr8NOFjZbRU0urEY8AbEf+bo9r0sN3cfiGkrJ+lRSv3fT8rdXqs25yzacH6mTtktTxXF0TOllB7ihG2mh6qzINESOTChKjkjh8hN0d6rwcRMmflsbpCycquDuA9cM62YIky/qFVX6WY2IrLFbC5LS0PMEdbJLfZcG+vKK7FoS3tMXgH6Aydc8k0taabRnMvTk4+hsQ2Jn1VssFptYv9EziLp23Yj7UqaAQ+ARpD7etIs91cZKNZyDt2rZgS5QyLw2QiNiAdVOm2Wn+CeOu57FHtDHZy2bEFGcrNJVrNjeeqEBaRDMi9zLEfE6oEZv1KAC7lKlqTqsTLA1/siNR2k2w23dSb8TXPNSLqGRedaCrcdftVOPwUreFcJH2H0hJEVVfr2WB9kybdS5kviXJjRpQyJA7xiOYo3eAIDj/NfLLk8AkWBXnx2Ir7lEqjaDb9oXRr700GxW5mRAeGlNNjd+hnv+pe5d7ERfLkHkPJykDh7Am1FzNGg+mm1kxxT9Qw6t94VTtfmEA22Sr7mfJn4cg9hpJtAUn3yk6TYpSMf6nk7uNYUFUPPI+pwj+EeLoPJfuDY/pmIOMkGRqcrzJ+vsreMidS/Cb3EJJ9wTmDkr1BwGl1evsChTGVmP2CPGF52qaEUyhpU4a9jznn72zSAP4DgajQfVl1LbUAAAAASUVORK5CYII="
var x = [] var y = [] var imgList = []
barData.forEach((item, index) => { x.push(item.x) y.push(item.value) imgList.push({ coord: [index, item.value], symbolSize: [22, 12], symbolOffset: ['23.5%', 0], symbol: "image://" + top, value: item.value, label: { show: true, offset: [0, -30], fontSize: 16, color: "#00baff", formatter: function (params) { return params.value + '%' } } }, { coord: [index, 0], symbolOffset: ['23.5%', 2.37], symbolSize: [22, 6], symbol: "image://" + bottom, itemStyle: { opacity: 0.8 } }, { coord: [index, 0], symbolOffset: ['22%', 0], symbolSize: [22, 12], symbol: "image://" + bottom1, itemStyle: { opacity: 0.8 } }) })
var option = { title: { text: 'Awesome Chart' }, xAxis: { show: false, offset: 20, interval: 20, data: x, axisLabel: { color: '#fff' }, axisLine: { show: true }, splitLine: { show: false }, axisTick: { show: false } }, yAxis: { show: false, axisLine: { show: true }, splitLine: { show: false }, axisTick: { show: false } }, series: [{ z: 1, type: 'bar', barWidth: 10, symbolOffset: [0, -8], data: y, offset: 10, itemStyle: { normal: { borderColor: new echart.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(0, 79, 197, 0.2)', }, { offset: 1, color: 'rgba(0, 79, 197, 1)', }, ]), color: { x: 0, y: 1, x2: 0, y2: 0, colorStops: [ { offset: 0, color: 'rgba(0, 79, 197, 1)' }, { offset: 1, color: 'rgba(0, 79, 197, 0)' } ] }, opacity: 0.8 } }, markPoint: { data: imgList } }, { z: 1, type: 'bar', barWidth: 10, barGap: '-3%', symbolOffset: [0, -10], data: y, offset: 10, itemStyle: { normal: { borderColor: new echart.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(0, 79, 197, 0.2)', }, { offset: 1, color: 'rgba(0, 79, 197, 1)', }, ]), color: { x: 0, y: 1, x2: 0, y2: 0, colorStops: [ {offset: 0, color: 'rgba(0, 154, 255, 1)'}, {offset: 1, color: 'rgba(0, 154, 255, 0)'} ] }, opacity: 0.8 } } }] };
// 绘制图表
// mergeJSON(option, optionObj); // console.log(option, 333, Object.assign(option, optionObj)); this.chart.setOption(option); window.onresize = () => { this.chart.resize(); } }
render() { const { width, height } = this.props; return ( ) } }
export default ManyPie; 参考：http://analysis.datains.cn/finance-admin/index.html#/chartLib/all