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,iVBORw0KGgoAAAANSUhEUgAAADcAAAAoCAYAAABaW2IIAAAF70lEQVRogc2aaYgcRRTHf3PubHYzHcfdNTGKoiPEoOIFAY0axRs06OqHCF4oEQQ/BPGECB5Eg0ERROKFYuIHo9EoKDH6QY2JIWCUKCbBReNsYmaPmd25dqfnlKqpPWa3u6e7Zwb8w8BuddWb96969d6/qsdTrVZxC883jgbeDDwCbAB22x1Uvc61e3jdD7WN04FPgC+BG4HvgfeB3nZ/cTvJ+YFHgT+A/lntHuBe4AjwUDt9aJfhlcABYBPQbdLnJGAz8BNwcTuccLTnPFvmNCye16UHeFmtjMeBH2XgDeAZYLzuSby+Y/Vu+0Y9rN5jv3f/ZfX/z5ATEfAg8CIQsW9wHk4AjwEfTj+YQ47te20ba0VYngOIb3yzSWICS4CtwLcqETUFv+ngqGbX7j/AZ8B5QFezDqmw3AEct+3XQMqwaytWrgBsBJYDnzdhp6pW7VzgdaDSrGOtzJYx4txBlrcoO3SsRJkMm4hzj8Euc43WkYuzAthPlrWM4iWr1sIK4nkGSOAjJxPJbuJc8P8hFydCXCYTkVQukm3C6ax0uha0RtCBUSBXNwmXAz8T5xXipvXRNpoh5yHOfUpprDW0VQKSKkVMBaqoaGPqUza0K5LcOuAwce5swj/X5M4HfgDeU4XbGnlgBEip1dJtfcdSYBvwtciRbpx0Q+5MVYdWOholQm/Sxj6cj+uBXcApTgc6J7d9b5xdv7zN4GjO8VinENLw76E0Ow9sZvvepNPhPpY9YPwkEprftmdAnK62UCitIpf1U84H6Or04DfXAq4xMQl/xSocHcqT1S8FbuHQ4J9EQrF5JpPGcW6uLWcrgYHUacALMkRCvgB9nRpBX6BmwQM9EVjcB94WVJZyGU4MQWJspi1fLjAymUIvixT1KfA8UW1oln+GpqxXbiAVIKk/LHWjz7Oc3s4wvZ0aPq+vrq+Y5bEUBAMQ6nBPLDkORwchN1Hf7vf6CAe78Hu95MtnU2UNSX2CpH6QSKjqfOVqNWeDFMbhYCcnh8L4PI2XJtwNS5dAMGifVF6HY//OJ2WEUqVMIp8mUxQ5+DfgCeBXu+T6gPXA7XT4AnKlQj4HnlILz76e2sdjcayrVGBoBEYSteThBBMlXYZqsVJUmlQsRLrOjTl/36/qV78kLsgFvM6zhXA6PgxHBiCTNe6TSsPhARgedU5MoMPnl/7V/Baa9EeQRX96NqdW7kLgJTDQdSIUe0ILWRhc4NwDhUUanLoYAn4oFOB4HNIZd7bEPKQLORL5DBXDWdkHPCWUkyAXViffSyyNdvqD9IbC01nSKUSoCpLjqdrKukEta6bRy8UGo78TUehVcbpabUzjnCowWSowmB2Vm9l4xqwhCCXH3BErVytyfx3LJhoQG1Z3o3cJkTe15yqyONck1TZTkSRax/QcsewwueKkcy9dIFOYIJYZIVWwSqUVpXOvFBpqqtGsFKxQlz3LLL1Z4O+Qtc9N0mmEQrnISD4tI8Yaogw8CRyc28uqzvnVUWad5d2IBw+RUBeLOrrl381ChPyYnmFczzUQ2WmV/reaXUmYF+WoViKqibvEq4CvTPtVqZLIZ2XoiNrTDHLFPLHsiAx9c2LiycdyC0W1D4hqppvYnrZE6rdrpaaDMyzd7w6E6AmFpWSyi2KlJLNg48k5ItN8VNs3xzfDzvaVblQTZ7irgVeFO6b9smr2x/WsjTuUWgjGMqMNiOWmhftcYhawv3KzMZA6SyWcKyytCxVhJt9m5JPxZcMMdko5GNWM7zExXzl35GaM3go82/CUPFt41wtfK8QUqcZvAdtyKRvVvlC15R11HWSMdGFSJpzRfEqGrDUxEfKvAatsEbNA86fLqJYhqom3MzfJazkzCJUxrk80UDdC/F5DVNtIVGu0sg3h7C1PY4jJWgM8rd6/2cWQCu8drXamlagoES4SzUc27rpEKL+ramlLibWD3BSSStncBhwy6XNA/Qhg/dxDZqvQ7hf++4EbgOdUrULdPz8OiEz7ezu/vNV7zgrixaLYj+KXDI7vIB0D+A/PryOBuvDOWwAAAABJRU5ErkJggg=="
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 (
<div ref={this.chartRef} style={{ width: width ? width : `100%`, height: height ? height : '100%' }}></div>
)
}
}
export default ManyPie;
参考：http://analysis.datains.cn/finance-admin/index.html#/chartLib/all
