【Vue ECharts开发】自定义echarts柱状图颜色渐变效果

1. 效果演示

2. 示例代码

Vue 模板代码：

<template><div><div id="main"></div></div>
</template><script>
// JavaScript脚本代码...
</script><style scoped>
#main {width: 900px;height: 300px;
}
</style>

JavaScript脚本代码：

import * as echarts from 'echarts'
export default {data() {return {chart: null,options: {}};},watch: {options: {deep: true,handler() {// 监听options值的变化，并重新渲染图表this.initChart()}}},mounted() {// 初始化ECharts对象this.chart = echarts.init(document.getElementById('main'))// 初始化图表配置项this.initOption()},methods: {initChart() {this.chart.setOption(this.options)},initOption() {this.options = {xAxis: {type: 'value',show: false // 不显示X轴},yAxis: [{ // 定义左侧Y轴type: 'category',data: ['女装', '男装', '箱包', '饰品', '裤子'],offset: 10,axisLine: {show: false // 不显示坐标轴轴线},axisTick: {show: false // 不显示坐标轴刻度}},{ // 定义右侧Y轴type: 'category',data: ['120', '100', '100', '90', '90'],position: 'right',nameTextStyle: {color: '#000'},axisLine: {show: false},axisTick: {show: false}}],grid: { // 绘制网格并设置偏移量show: true,top: '10%',left: '10%',right: '15%',bottom: '10%'},color: [{type: 'linear',x: 1,y: 1,x2: 0,y2: 0,colorStops: [  // 设置颜色渐变{ offset: 0, color: 'rgba(63, 149, 206, 1)' },{ offset: 1, color: 'rgba(30, 231, 231, 1)' }]}],series: [{type: 'bar',data: [120, 100, 100, 90, 90],showBackground: true, // 显示柱条的背景色barWidth: 20, // 设置柱条宽度}]}}},
};

【Vue ECharts开发】自定义echarts柱状图颜色渐变效果相关推荐

安卓自定义View——网易颜色渐变效果指示器
一直想写博客来着,可惜直到现在才真正抽出时间.最近一直在研究网易新闻这个UI框架,发现了一些很值得借鉴的效果,当然,网上也不乏这方面的介绍.本文主要实现的指示器效果为字体颜色和大小渐变,废话不多说献上 ...
vue项目中使用echarts完成图表类的开发之饼图，环形图
最近在vue项目中使用echarts.js完成诸如饼图,环形图,折线图,折线图加柱状图,和柱状图(水平柱状图和垂直柱状图),以及柱状图堆叠,下面请看图片展示: 如上图所示基本上echarts的简单图表 ...
echarts自定义renderItem柱状图，每个系列柱子数不一样
话不多说,先上图业务需求是,在[前期库存中],显示四年的数量:后面的1-12月每个系列中最多显示两个柱子. 在echarts官方实例中,系列的数量是由 series 数组中的数量决定的,也就是说该数 ...
SpringBoot+Vue+Echarts实现双柱体柱状图
场景若依前后端分离版本地搭建开发环境并运行项目的教程: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面搭建架构的基础上,实现使用 ...
vue项目中使用Echarts 动态更改图表数据， Vue 折线图、柱状图等图表动态刷新，
问题:在vue组件中,用echarts插件动态获取.修改图表数据解决:已解决! 第一步:打开cmd命令窗口安装echarts依赖安装:npm install echarts -S 第二步:在m ...
【vue后台管理系统】基于Vue+Element-UI+ECharts开发通用管理后台（中）
文章目录 Vuex实现左侧菜单栏折叠效果展示思路分析及代码实现漏洞完善 Home组件的实现名片部分 table数据展示部分订单统计部分实现首页可视化图表样式调整 ECharts基本使用折 ...
vue 刷新echarts_用Vue开发动态刷新Echarts组件（以及修改时遇到的问题）
通过这篇文章我学习了vue集成echarts,尝试了一下demo没问题,但是在修改我预期效果时,却出了一点问题,最后解决思路见最后从几年前流行的jQuery插件,到现在React和Vue的组件,在业 ...
echarts柱状图改变标签的位置及柱状图颜色
echarts柱状图改变标签的位置(柱状图里面的数值位置)及柱状图颜色在 series里面改变label对象里面的label属性 import * as echarts from 'echarts' ...
echarts柱状图颜色渐变样式
option: {title: {text: ''},color: [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, c ...

【Vue ECharts开发】自定义echarts柱状图颜色渐变效果

1. 效果演示

2. 示例代码

【Vue ECharts开发】自定义echarts柱状图颜色渐变效果相关推荐

最新文章

热门文章