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 圆柱形渐变色柱状图相关推荐

词云图、动态图、统计图、玫瑰图、象形图、多渐变色柱状图、双色叠加象形图等十个图(可单独运行，直接拿来用)
把这些图给大家分享的目的是因为我在需要使用的时候网上的图要不就是需要下载,要不就是不全,最好的也是需要自己下载js包,但是对于学习后端的我们来说上手十分不容易.尤其是课程项目紧张,难道我们还需要去学习 ...
Python Matplotlib绘制渐变色柱状图（bar）并加边框和配置渐变颜色条（colorbar）
热力图是数据分析的常用方法,通过色差.亮度来展示数据的差异.易于理解.目前,常见的是看数据表里多个特征两两的相关度热力图. 基于此思想,做出柱状热力图,用于展现单个特征针对整体的相关度,以此列出所有特 ...
Echarts-3D渐变色柱状图组件
 <template><div class="bbb"><div id="char ...
echarts自定义图表颜色，柱状图/饼图自定义渐变色
echarts自定义图表颜色,自定义渐变色柱状图: 单色: 原先图表的颜色配置代码: series: {type: "bar",barWidth: "60" ...
带着canvas去流浪系列之一：绘制柱状图
[摘要] 学习使用canvasAPI来实现数据可视化. 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明使用原生canvasAPI绘制柱 ...
Echarts常用柱状图
最近做可视化比较多,就常用的图表类型做了一下总结. 因为做可视化的图表代码量非常大,所以会把echarts图表单独抽离出来,封装成一个组件,也可以复用,所以这里我直接把封装的组件直接放在这里,是可以直 ...
matplotlib绘制柱状图(基础操作)
@TOC 前言 Matplotlib 是 Python 的绘图库. 它可与 NumPy 一起使用,提供了一种有效的 MatLab 开源替代方案. 它也可以和图形工具包一起使用,如 PyQt 和 wxP ...
echart freemarker 模板_SpringBoot集成Freemarker模板生成Echarts图片(三）
紧接着前面两篇,本篇采用Freemarker模板来生成Echarts图片. 一. 项目结构二. Freemarker模板 (1)柱状图 { "title": { "te ...
Highcharts插件常用配置
目录一.参数部分: 1. chart: 图表配置 2. credits: 版权信息 3. exporting: 导出部分 4. legend: 图例 5. plotOptions: 数据列配置 6. ...

EchartsBar 圆柱形渐变色柱状图

EchartsBar 圆柱形渐变色柱状图相关推荐

最新文章

热门文章