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 圆柱形渐变色柱状图
版权声明:本文标题:EchartsBar 圆柱形渐变色柱状图 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/jishu/1687329808h90248.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论