admin 管理员组

文章数量: 1184232

Echarts

效果如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>模拟3D柱状图+渐变色柱子</title><scripttype="text/javascript"src="@5/dist/echarts.min.js"></script><script src=".1.4/jquery.min.js"></script></head><body><div id="bar" style="width: 1000px; height: 500px"></div><script type="text/javascript">let myBarChart = echarts.init(document.getElementById('bar'))// 得到的数据let seriesData1 = [{name: '国君',value: 20,},{name: '中信',value: 100,},{name: '中金',value: 50,},{name: '华泰',value: 44,},{name: '海通',value: 12,},]// 柱子降序排列seriesData1.sort((a, b) => b.value - a.value)console.log(seriesData1)// x轴证券公司名称let xData = []seriesData1.forEach((item) => {xData.push(item.name)})// 数据let seriesData = []seriesData1.forEach((item) => {seriesData.push(item.value)})// 颜色组let linearArr = ['#4D89FF','#84BEFF','#3C6CCC','#FFA95D','#FF7F0E','#CC650B','#E46F07',]// 绘制左侧面const offsetX = 10,sliderWidth = 7,offsetTick = 10const CubeLeft = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {// shape是从custom传入的const api = shape.apiconst xAxisPoint = api.coord([shape.xValue, 0])const c0 = [shape.x - offsetTick, shape.y]const c1 = [shape.x - offsetTick + offsetX, shape.y]const c2 = [xAxisPoint[0] - offsetTick + offsetX, xAxisPoint[1]]const c3 = [xAxisPoint[0] - offsetTick, 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 = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {const api = shape.apiconst xAxisPoint = api.coord([shape.xValue, 0])const c1 = [shape.x - offsetTick + offsetX, shape.y]const c2 = [shape.x - offsetTick + offsetX + sliderWidth,shape.y - sliderWidth,]const c3 = [xAxisPoint[0] - offsetTick + offsetX + sliderWidth,xAxisPoint[1] - sliderWidth + 4,]const c4 = [shape.x - offsetTick + offsetX, xAxisPoint[1]]ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()},})// 绘制顶面const CubeTop = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {const c1 = [shape.x - offsetTick, shape.y]const c2 = [shape.x - offsetTick + offsetX, shape.y] // 右点const c3 = [shape.x - offsetTick + offsetX + sliderWidth,shape.y - sliderWidth,]const c4 = [shape.x - offsetTick + sliderWidth, shape.y - sliderWidth]ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).lineTo(c1[0], c1[1]).closePath()},})// 注册三个面图形echarts.graphic.registerShape('CubeLeft', CubeLeft)echarts.graphic.registerShape('CubeRight', CubeRight)echarts.graphic.registerShape('CubeTop', CubeTop)option = {xAxis: {axisTick: {// 不显示坐标刻度show: false,},axisLine: {show: false, // 不显示坐标轴线},data: xData,},yAxis: {type: 'value',// 不显示网格splitLine: {show: false,},},series: [{type: 'custom',data: seriesData,itemStyle: {shadowColor: '#000',shadowBlur: 100,},renderItem: function (params, api) {let location = api.coord([api.value(0), api.value(1)])console.log(seriesData[params.dataIndex])return {type: 'group',children: [// 柱子前面{type: 'CubeLeft',// shape 属性描述了这个矩形的像素位置和大小shape: {api,xValue: api.value(0), //表示取出当前 dataItem 中第一个维度的数值yValue: api.value(0),x: location[0],y: location[1],},style: {//柱子阴影shadowColor:xData[params.dataIndex] === '海通'? '#FF7F0E': '#8DD0FA',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 7,// 颜色fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color:xData[params.dataIndex] === '海通'? linearArr[4]: linearArr[0],},{offset: 1,color:xData[params.dataIndex] === '海通'? linearArr[3]: linearArr[1],},]),},},// 柱子侧面{type: 'CubeRight',shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],},style: {//柱子阴影shadowColor:xData[params.dataIndex] === '海通'? '#FF7F0E': '#8DD0FA',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 7,//颜色fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color:xData[params.dataIndex] === '海通'? linearArr[6]: linearArr[2],},{offset: 1,color:xData[params.dataIndex] === '海通'? linearArr[5]: linearArr[2],},]), //平面颜色},},// 柱子顶部{type: 'CubeTop',shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],},style: {//柱子阴影shadowColor:xData[params.dataIndex] === '海通'? '#FF7F0E': '#8DD0FA',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 7,fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color:xData[params.dataIndex] === '海通'? linearArr[4]: linearArr[0],},{offset: 1,color:xData[params.dataIndex] === '海通'? linearArr[3]: linearArr[1],},]), //平面颜色},},],}},},],}myBarChart.setOption(option)</script></body>
</html>

本文标签： Echarts

版权声明：本文标题：Echarts 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687450190a103925.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。