<!-- 产业分析版块 3D圆柱柱形图 --><template><div class="bbb"><div id="charts3" style="width: 100%;height:100%;"></div></div></template><script>import * as echarts from "echarts";export default {mounted() {this.initEcharts();},methods: {initEcharts() {var xData = ["种植业", "林业", "畜牧业", "水产业"];var yData = [1000, 1800, 2100, 2800];var color = "#fff";var barWidth = 50;var option = {title: [{left: "center",text: "第一产业统计",textStyle: {fontSize: "0.16rem",color: "#fff",lineHeight: "20"},}, {left: "right",text: "单位:万元",textStyle: {fontSize: "0.14rem",color: "#f4f4f4",lineHeight: "80"}}],// backgroundColor: '#05233b',"grid": {"top": "25%","left": "0%","bottom": "5%","right": "5%","containLabel": true},animation: false,"xAxis": [{"type": "category","data": xData,"axisTick": {"alignWithLabel": true},"nameTextStyle": {"color": "#82b0ec"},axisLine: {lineStyle: {color: "rgba(225, 225, 225, 0.15)"}},"axisLabel": {"textStyle": {"color": color},margin: 30}}],"yAxis": [{show: true,type: "value","axisLabel": {"textStyle": {"color": "#fff"},},splitLine: {//网格线show: true,lineStyle: {// 使用深浅的间隔色color: "rgba(225, 225, 225, 0.15)"}},"axisLine": {show: true}}],"series": [{"name": "数据上椭圆",type: 'pictorialBar',symbolSize: [barWidth, 10],symbolOffset: [0, -6],symbolPosition: 'end',z: 12,// "label": {//"normal": {// "show": true,// "position": "top",// fontSize: 14,// color: color,// formatter: function (params, index) {// return params.value + "%";// }//}// },itemStyle: {color: function (params) {var colorlist = ['rgba(195, 104, 247,0.9)', 'rgba(247, 68, 168,0.9)', 'rgba(253, 148, 95,0.9)', 'rgba(63, 167, 242,0.9)'];var colorlist2 = ['rgba(174, 70, 247,0.9)', 'rgba(215, 24, 80,0.9)', 'rgba(247, 78, 64,0.9)', 'rgba(21, 100, 232,0.9)']return new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{offset: 0,color: colorlist2[params.dataIndex]},{offset: 1,color: colorlist[params.dataIndex]}])}},data: yData},{name: '下椭圆',type: 'pictorialBar',symbolSize: [barWidth, 10],symbolOffset: [0, 7],z: 12,itemStyle: {color: function (params) {var colorlist = ['#c163f7', '#f744a8', '#fd945f', '#3fa7f2'];var colorlist2 = ['#ae46f7', '#d71850', '#f74e40', '#1564e8']return new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{offset: 0,color: colorlist2[params.dataIndex]},{offset: 1,color: colorlist[params.dataIndex]}])}},"data": yData},{type: 'bar',"barWidth": barWidth,barGap: '10%', // Make series be overlapbarCateGoryGap: '10%',itemStyle: {normal: {color: function (params) {var colorlist = ['#6a3d95', '#652565', '#6f485b', '#12305f'];var colorlist2 = ['#ba66e3', '#d13580', '#eb726c', '#2882e5']return new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{offset: 0,color: colorlist[params.dataIndex]},{offset: 1,color: colorlist2[params.dataIndex]}])}},},data: yData},]};const myChart = echarts.init(document.getElementById("charts3"));//随着屏幕大小调节图表window.addEventListener("resize", () => {myChart.resize();});myChart.setOption(option);}}}</script><style>.bbb {width: 100%;height: 100%;}.bbb>.echart {width: 100%;height: 100%;}</style>
