3D柱状图1
预览图：
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 } ] setOptions() { const { title = false, subtitle = '', xAxis = this.xAxis, barColor = this.barColor, barWidth = 4, barData = this.barData, barBorderRadius = [10, 10, 0, 0], optionObj = {} } = this.props; const offsetX = 20; const offsetY = 10; let x = []; let y = []; barData.forEach((item, index) => { x.push(item.x) y.push(item.value) }) // 绘制左侧面 const CubeLeft = echart.graphic.extendShape({ shape: { x: 0, y: 0, }, buildPath: function (ctx, shape) { // 会canvas的应该都能看得懂，shape是从custom传入的 const xAxisPoint = shape.xAxisPoint; const c0 = [shape.x, shape.y - 1]; // 右上 const c1 = [shape.x - offsetX + 5, shape.y - offsetY + 2]; // 左上 const c2 = [xAxisPoint[0] - offsetX + 5, xAxisPoint[1] - offsetY + 2]; // 左下 const c3 = [xAxisPoint[0], xAxisPoint[1]]; // 右下 ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath(); }, }); // 绘制右侧面 const CubeRight = echart.graphic.extendShape({ shape: { x: 0, y: 0, }, buildPath: function (ctx, shape) { const xAxisPoint = shape.xAxisPoint; const c1 = [shape.x, shape.y - 1]; // 左上 const c2 = [xAxisPoint[0], xAxisPoint[1]]; // 左下 const c3 = [xAxisPoint[0] + offsetX - 5, xAxisPoint[1] - offsetY + 2]; // 右下 const c4 = [shape.x + offsetX - 5, shape.y - offsetY + 2]; // 右上 ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath(); }, }); // 绘制顶面 const CubeTop = echart.graphic.extendShape({ shape: { x: 0, y: 0, }, buildPath: function (ctx, shape) { const c1 = [shape.x, shape.y - 1]; // 下点 const c2 = [shape.x + offsetX - 5, shape.y - offsetY + 2]; //右点 const c3 = [shape.x, shape.y - offsetX + 5]; // 上点 const c4 = [shape.x - offsetX + 5, shape.y - offsetY + 2]; // 左点 ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath(); }, }); // 绘制底面 const CubeBottom = echart.graphic.extendShape({ shape: { x: 0, y: 0, }, buildPath: function (ctx, shape) { const xAxisPoint = shape.xAxisPoint; const c1 = [xAxisPoint[0] - offsetX + 5, xAxisPoint[1] - offsetY + 2]; // 左 const c2 = [xAxisPoint[0], xAxisPoint[1]]; // 下 const c3 = [xAxisPoint[0] + offsetX - 5, xAxisPoint[1] - offsetY + 2]; // 右 const c4 = [xAxisPoint[0], xAxisPoint[1] - 16]; // 上 ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath(); }, }); // 注册三个面图形 echart.graphic.registerShape('CubeLeft', CubeLeft); echart.graphic.registerShape('CubeRight', CubeRight); echart.graphic.registerShape('CubeTop', CubeTop); echart.graphic.registerShape('CubeBottom', CubeBottom);
var option = { backgroundColor: 'transparent', tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', }, formatter: function (params, ticket, callback) { const item = params[1]; return item.name + ' : ' + item.value; }, }, grid: { left: 0, right: 0, top: '5%', bottom: '5%', containLabel: true, }, xAxis: { type: 'category', data: x, offset: 5, axisLine: { show: true, lineStyle: { width: 2, color: 'rgba(255, 255, 255, 0.2)', }, }, axisTick: { show: false, }, axisLabel: { fontSize: 12, color: 'rgba(255, 255, 255, 1)', fontFamily: 'TengXunZiTi' }, }, yAxis: { type: 'value', axisLine: { show: true, lineStyle: { width: 2, color: 'rgba(255, 255, 255, 0.2)', }, }, splitLine: { show: false }, axisTick: { show: false, }, axisLabel: { fontSize: 12, color: 'rgba(255, 255, 255, 1)', fontFamily: 'TengXunZiTi' }, // boundaryGap: ['20%', '20%'], }, series: [ { type: 'custom', renderItem: (params, api) => { const location = api.coord([api.value(0), api.value(1)]); return { type: 'group', children: [ { type: 'CubeLeft', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]), }, style: { stroke: new echart.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(38, 206, 255, 0.2)', }, { offset: 1, color: 'rgba(38, 206, 255, 1)', }, ]), fill: new echart.graphic.LinearGradient(0, 0, 0, 0.8, [ { offset: 0, color: 'rgba(2, 107, 138, 0.1)', // color: 'red', }, { offset: 0.6, color: 'rgba(38, 206, 255, 0.3)', // color: 'gold', }, { offset: 1, color: 'rgba(38, 206, 255, 0.7)', // color: 'gold', }, ]), }, }, { type: 'CubeRight', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]), }, style: { stroke: new echart.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(38, 206, 255, 0.2)', }, { offset: 1, color: 'rgba(38, 206, 255, 1)', }, ]), fill: new echart.graphic.LinearGradient(0, 0, .7, 0.8, [ { offset: 0, color: 'rgba(2, 107, 138, 0.1)', // color: 'red', }, { offset: 0.6, color: 'rgba(38, 206, 255, 0.3)', // color: 'gold', }, { offset: 1, color: 'rgba(38, 206, 255, 0.7)', // color: 'gold', }, ]), }, }, { type: 'CubeTop', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]), }, style: { fill: new echart.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(5, 150, 193, 1)', }, { offset: 1, color: 'rgba(38, 206, 255, 1)', }, ]), }, }, { type: 'CubeBottom', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]), }, style: { stroke: 'rgba(105, 213, 243, 0.6)', fill: new echart.graphic.LinearGradient(0, 0, 0.7, 0.4, [ { offset: 0, color: 'rgba(105, 213, 243, 0.28)', }, { offset: 1, color: 'rgba(105, 213, 243, 0.28)', }, ]), }, }, ], }; }, data: y, }, { type: 'bar', label: { normal: { show: false, position: 'top', formatter: (e) => { return e.value + '次'; /*console.log(e) switch (e.name) { case '1001': return e.value; case '1002': return y[1]; case '1003': return y[2]; }*/ }, fontSize: 16, color: '#43C4F1', offset: [0, -25], }, }, itemStyle: { color: 'transparent', }, tooltip: {}, data: y }, ], };
// 绘制图表 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 } ] setOptions() { const { title = false, subtitle = '', xAxis = this.xAxis, barColor = this.barColor, barWidth = 4, barData = this.barData, barBorderRadius = [10, 10, 0, 0], optionObj = {} } = this.props; const offsetX = 20; const offsetY = 10; let x = []; let y = []; barData.forEach((item, index) => { x.push(item.x) y.push(item.value) }) // 绘制左侧面 const CubeLeft = echart.graphic.extendShape({ shape: { x: 0, y: 0, }, buildPath: function (ctx, shape) { // 会canvas的应该都能看得懂，shape是从custom传入的 const xAxisPoint = shape.xAxisPoint; const c0 = [shape.x, shape.y - 1]; // 右上 const c1 = [shape.x - offsetX + 5, shape.y - offsetY + 2]; // 左上 const c2 = [xAxisPoint[0] - offsetX + 5, xAxisPoint[1] - offsetY + 2]; // 左下 const c3 = [xAxisPoint[0], xAxisPoint[1]]; // 右下 ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath(); }, }); // 绘制右侧面 const CubeRight = echart.graphic.extendShape({ shape: { x: 0, y: 0, }, buildPath: function (ctx, shape) { const xAxisPoint = shape.xAxisPoint; const c1 = [shape.x, shape.y - 1]; // 左上 const c2 = [xAxisPoint[0], xAxisPoint[1]]; // 左下 const c3 = [xAxisPoint[0] + offsetX - 5, xAxisPoint[1] - offsetY + 2]; // 右下 const c4 = [shape.x + offsetX - 5, shape.y - offsetY + 2]; // 右上 ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath(); }, }); // 绘制顶面 const CubeTop = echart.graphic.extendShape({ shape: { x: 0, y: 0, }, buildPath: function (ctx, shape) { const c1 = [shape.x, shape.y - 1]; // 下点 const c2 = [shape.x + offsetX - 5, shape.y - offsetY + 2]; //右点 const c3 = [shape.x, shape.y - offsetX + 5]; // 上点 const c4 = [shape.x - offsetX + 5, shape.y - offsetY + 2]; // 左点 ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath(); }, }); // 绘制底面 const CubeBottom = echart.graphic.extendShape({ shape: { x: 0, y: 0, }, buildPath: function (ctx, shape) { const xAxisPoint = shape.xAxisPoint; const c1 = [xAxisPoint[0] - offsetX + 5, xAxisPoint[1] - offsetY + 2]; // 左 const c2 = [xAxisPoint[0], xAxisPoint[1]]; // 下 const c3 = [xAxisPoint[0] + offsetX - 5, xAxisPoint[1] - offsetY + 2]; // 右 const c4 = [xAxisPoint[0], xAxisPoint[1] - 16]; // 上 ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath(); }, }); // 注册三个面图形 echart.graphic.registerShape('CubeLeft', CubeLeft); echart.graphic.registerShape('CubeRight', CubeRight); echart.graphic.registerShape('CubeTop', CubeTop); echart.graphic.registerShape('CubeBottom', CubeBottom);
var option = { backgroundColor: 'transparent', tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', }, formatter: function (params, ticket, callback) { const item = params[1]; return item.name + ' : ' + item.value; }, }, grid: { left: 0, right: 0, top: '5%', bottom: '5%', containLabel: true, }, xAxis: { type: 'category', data: x, offset: 5, axisLine: { show: true, lineStyle: { width: 2, color: 'rgba(255, 255, 255, 0.2)', }, }, axisTick: { show: false, }, axisLabel: { fontSize: 12, color: 'rgba(255, 255, 255, 1)', fontFamily: 'TengXunZiTi' }, }, yAxis: { type: 'value', axisLine: { show: true, lineStyle: { width: 2, color: 'rgba(255, 255, 255, 0.2)', }, }, splitLine: { show: false }, axisTick: { show: false, }, axisLabel: { fontSize: 12, color: 'rgba(255, 255, 255, 1)', fontFamily: 'TengXunZiTi' }, // boundaryGap: ['20%', '20%'], }, series: [ { type: 'custom', renderItem: (params, api) => { const location = api.coord([api.value(0), api.value(1)]); return { type: 'group', children: [ { type: 'CubeLeft', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]), }, style: { stroke: new echart.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(38, 206, 255, 0.2)', }, { offset: 1, color: 'rgba(38, 206, 255, 1)', }, ]), fill: new echart.graphic.LinearGradient(0, 0, 0, 0.8, [ { offset: 0, color: 'rgba(2, 107, 138, 0.1)', // color: 'red', }, { offset: 0.6, color: 'rgba(38, 206, 255, 0.3)', // color: 'gold', }, { offset: 1, color: 'rgba(38, 206, 255, 0.7)', // color: 'gold', }, ]), }, }, { type: 'CubeRight', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]), }, style: { stroke: new echart.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(38, 206, 255, 0.2)', }, { offset: 1, color: 'rgba(38, 206, 255, 1)', }, ]), fill: new echart.graphic.LinearGradient(0, 0, .7, 0.8, [ { offset: 0, color: 'rgba(2, 107, 138, 0.1)', // color: 'red', }, { offset: 0.6, color: 'rgba(38, 206, 255, 0.3)', // color: 'gold', }, { offset: 1, color: 'rgba(38, 206, 255, 0.7)', // color: 'gold', }, ]), }, }, { type: 'CubeTop', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]), }, style: { fill: new echart.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(5, 150, 193, 1)', }, { offset: 1, color: 'rgba(38, 206, 255, 1)', }, ]), }, }, { type: 'CubeBottom', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]), }, style: { stroke: 'rgba(105, 213, 243, 0.6)', fill: new echart.graphic.LinearGradient(0, 0, 0.7, 0.4, [ { offset: 0, color: 'rgba(105, 213, 243, 0.28)', }, { offset: 1, color: 'rgba(105, 213, 243, 0.28)', }, ]), }, }, ], }; }, data: y, }, { type: 'bar', label: { normal: { show: false, position: 'top', formatter: (e) => { return e.value + '次'; /*console.log(e) switch (e.name) { case '1001': return e.value; case '1002': return y[1]; case '1003': return y[2]; }*/ }, fontSize: 16, color: '#43C4F1', offset: [0, -25], }, }, itemStyle: { color: 'transparent', }, tooltip: {}, data: y }, ], };
// 绘制图表 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