admin 管理员组

文章数量: 893603

EchartsBar 圆柱形渐变色柱状图

需求:柱状渐变色,x轴不限制刻度轴,背景轴线虚线

图表代码:

barChart(myChart, date, data) {myChart.setOption({grid: { //容器位置left: 10,right: 10,bottom: 0,containLabel: true,},xAxis: { //X轴属性设置type: "category",data: date,axisLine: {lineStyle: {color: "#A0FFFE",type: "dashed",},},axisTick: { //X轴不显示刻度线分隔show: false,},},yAxis: { //Y轴属性设置type: "value",axisLine: {lineStyle: {color: "#A0FFFE",},},splitLine: { show: true,lineStyle: {type: "dashed",},},},series: [ //数据及样式设置{data: data,type: "bar",barWidth: 20,itemStyle: { //圆角及渐变borderRadius: [45, 45, 0, 0],color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(153,244,244,.7)",},{offset: 1,color: "rgba(42,68,87,.5)",},]),},},],});window.addEventListener("resize", function () {myChart.resize();});this.$on("hook:destroyed", () => {window.removeEventListener("resize", function () {myChart.resize();});});},

echarts配置项文档  相关属性在里面都有声明

使用(举例):

document.getElementById("main0").setAttribute("_echarts_instance_", "");
let myChartM1 = this.$echarts.init(document.getElementById("main0"));
this.barChart(myChartM1,["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"],["12", "23", "56", "89", "45", "16", "99"]
);

document.getElementById(xx).setAttribute("_echarts_instance_", "");

重置刷新图表,很好用

本文标签: EchartsBar 圆柱形渐变色柱状图