echarts修改坐标轴样式代码展示 解决方案
dearweb 发布:2022-07-16 23:56:50阅读://var myChart = this.$echarts.init(document.getElementById("echart-container_0")); //vue var myChart = echarts.init(document.getElementById("echart-container_0"));//jquery var option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['已投票', "放弃投票"], //align: 'left', right: 10, textStyle: { color: "#fff" }, itemWidth: 14, itemHeight: 10, itemGap: 13, }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'category', data: ['1号','18号','22号', '29号'], axisLine: {/x轴线的颜色以及宽度 show: true, lineStyle: { color: "#fff", width: 0, type: "solid" } }, axisTick: { show: false, }, axisLabel: {//x轴文字的配置 show: true, textStyle: { color: "#fff", } }, splitLine: {//分割线配置 show:false, lineStyle: { color: "#fff", } } }], yAxis: [{ type: 'value', name:"单位:个",//y轴上方的单位 nameTextStyle:{//y轴上方单位的颜色 color:'#fff' }, axisLabel: {//y轴文字的配置 textStyle: { color: "#fff", margin: 15 }, // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号 }, axisTick: { show: false, }, axisLine: {//y轴线的颜色以及宽度 show: false, lineStyle: { color: "#fff", width: 1, type: "solid" }, }, splitLine: {//分割线配置 show:false, lineStyle: { color: "#fff", } } }], series: [{ name: '已投票', type: 'bar', data: [38,38,42,48], barWidth: 10, //柱子宽度 barGap: .5, //柱子之间间距 itemStyle: { normal: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(0, 153, 239, 0.8)' }, { offset: 1, color: 'rgba(66, 187, 255, 1)' }]), opacity: 1, } } }, { name: '放弃投票', type: 'bar', data: [40, 30, 42, 50], barWidth: 10, barGap: .5, itemStyle: { normal: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(0, 242, 159, 1)' }, { offset: 1, color: 'rgba(76, 240, 254, 1)' }]), opacity: 1, } } }] }; myChart.setOption(option); window.addEventListener("resize", () => { myChart.resize(); });
小礼物走一波,支持作者
赏还没有人赞赏,支持一波吧