echarts-柱状图-价格
效果图:
<div style="width: 462px; height: 230px" id="energyRightTopDian"></div>
// 自适应字体大小变化 WidthAdaptive(res) { var windth = window.innerWidth; let fontSize = windth / 1920; return fontSize * res; }, drawLine() { // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init( document.getElementById("energyRightTopDian") ); let option = { backgroundColor: "transparent", tooltip: { trigger: "axis", axisPointer: { type: "shadow", }, }, grid: { top: "15%", right: "5%", left: "10%", bottom: "10%", }, xAxis: [ { type: "category", data: [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月", ], axisLine: { lineStyle: { color: "rgba(255,255,255,.5)", }, }, axisLabel: { margin: 10, color: "#e2e9ff", textStyle: { fontSize: this.WidthAdaptive(10), }, }, axisTick: { show: false, }, }, ], yAxis: [ { name: "单位:元 ", nameTextStyle: { color: "#CCCCCC", fontSize: this.WidthAdaptive(10), padding: 5, }, axisLabel: { formatter: "{value}", color: "rgba(255,255,255,.9)", fontSize: this.WidthAdaptive(10), }, axisTick: { show: false, }, axisLine: { show: false, lineStyle: { color: "rgba(0,186,255,.6)", }, }, splitLine: { lineStyle: { type: "dashed", color: "rgba(255,255,255,0.2)", }, }, }, ], series: [ { type: "bar", data: [ 680, 580, 697, 753, 595, 626, 472, 680, 580, 697, 753, 595, 626, ], barWidth: "4px", itemStyle: { normal: { color: new this.$echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "rgba(16,210,172,1)", // 0% 处的颜色 }, { offset: 1, color: "rgba(16,210,172,0.1)", // 100% 处的颜色 }, ], false ), shadowColor: "rgba(0,160,221,1)", shadowBlur: 4, }, }, label: { normal: { show: true, lineHeight: 30, formatter: "¥{c}", position: "top", textStyle: { color: "rgba(255,255,255,.9)", fontSize: this.WidthAdaptive(10), }, }, }, }, ], }; window.onresize = function () { myChart.resize(); }; myChart.setOption(option); },