vue+echarts双柱状图渐变色

一、效果图

二、代码

<div id="main" style="width: 100%; height: 200px"></div>


methods: {drawLine() {// 基于准备好的dom，初始化echarts实例let myChart = this.$echarts.init(document.getElementById("main"));// 绘制图表myChart.setOption({tooltip: {trigger: "axis",},grid: {left: "1%",right: "1%",top: "20%",bottom: "2%",containLabel: true,},legend: {icon: "rect", //形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，noneitemWidth: 18, // 设置宽度itemHeight: 4, // 设置高度itemGap: 20, // 设置间距data: ["户", "人"],textStyle: {//文字样式color: "#333333",fontSize: "14",},left: "0%",},xAxis: [{type: "category",data: ['一','二','三','四','五'],axisPointer: {type: "shadow",},axisLine: {show: false, //不显示坐标轴轴线},axisTick: {show: false, //不显示坐标轴刻度},},],yAxis: [{type: "value",// name: "单位：(°C)",axisLabel: {formatter: "{value}",},},],series: [{name: "户",type: "bar",barWidth: "20%",data: [3,6,5,9,5],// 柱子渐变色itemStyle: {normal: {barBorderRadius: [3, 3, 0, 0],// 柱子圆角color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: "#FFDCAD" },{ offset: 0, color: "#FFA215" },]),},},},{name: "人",type: "bar",barWidth: "20%",data: [7,5,2,1,6],itemStyle: {normal: {barBorderRadius: [3, 3, 0, 0],// 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐变。// offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#5683FC" },{ offset: 1, color: "#8FB9FE" },]),},},},],label: {show: true, //开启显示position: "top", //在上方显示textStyle: {//数值样式color: "#333",fontSize: "10",},},});window.addEventListener("resize",function (){myChart.resize();});},},//调用mounted() {this.drawLine();},

有问题可以留言，看到会回复！！！

vue+echarts双柱状图渐变色相关推荐

Echarts 双柱状图+折线图合并---实现效果详解(vue+Echarts实现)
此文章讲解 Echarts 在 vue 开发中的使用方式以及实现效果的 demo 示例展示; 如有疑问或者不清楚的欢迎随时提问 . 废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验 ...
Vue + ECharts 象形柱状图 pictorialBar
前言:由于公司可视化数字大屏项目需要用到了象形柱状图,所以在博客里记录一下!如果能帮到你,那么点个赞吧,哈哈哈话不多说,直接先上效果图: 创建一个vue组件,我这里由于项目取名为:departmen ...
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
grid: {show: false,left: '0px',top: '50px',right: '1px',bottom: '0px',containLabel: true,backgroundC ...
Vue：echarts的柱状图怎样按照比例缩小？
Vue:echarts的柱状图怎样按照比例缩小? 资源: vue制作echart图表随着画面等比例放大缩小第二种方法:在div中使用echarts,利用div的参数来限制echarts生成的图表的大 ...
Vue：echarts的柱状图为什么X轴上的文字不显示？
Vue:echarts的柱状图为什么X轴上的文字不显示? 资源: echarts x轴文字显示不全(解决方案) echarts柱状图X轴底部文字有的不显示出来?
echarts legend颜色_echarts数据可视化图表（二）：双柱状图
echarts数据可视化图表(二):双柱状图效果图: html js var loadEcharts09 = function () { var myChartss = echarts.init(d ...
前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图
Vue接入Echarts 显示柱状图饼图使用CLI接入 npm install echarts --save 1.可以全局引入(在main.js) // 引入echarts import echar ...
echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图
在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 在相应的vue中导入echarts ...
vue使用Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...

vue+echarts双柱状图渐变色

vue+echarts双柱状图渐变色相关推荐

最新文章

热门文章