echarts：在vue中使用渐变色

1、线性渐变

1.1、垂直方向的渐变

以柱形图为例，如果设置柱子垂直方向渐变，只需要设置x=0,y=1即可，本案例从下往上颜色从蓝色变为红色，如果想要颜色从上往下渐变，改变offset的值即可，比如将下面的offset改为1、0.5、0，颜色就反过来了。

color: {type: 'linear',// x=0,y=1,柱子的颜色在垂直方向渐变x: 0,y: 1,colorStops: [// 0%处的颜色{offset: 0,color: '#12c2e9',},// 50%处的颜色{offset: 0.5,color: '#c471ed',},// 100%处的颜色{offset: 1,color: '#f64f59',},],global: false // 缺省为 false}

1.2、水平方向的渐变

如果设置柱子水平方向渐变，只需要设置x2=1,y2=0即可，颜色从左往右渐变，同理，想要颜色从右往左渐变，也是修改offset即可。

color: {type: 'linear',// x2=1,y=0,柱子的颜色在水平方向渐变x2: 1,y2: 0,colorStops: [// 0%处的颜色{offset: 0,color: '#12c2e9',},// 50%处的颜色{offset: 0.5,color: '#c471ed',},// 100%处的颜色{offset: 1,color: '#f64f59',},],global: false // 缺省为 false}

完整代码如下：

<template><!-- 渐变色案例 --><div id="main" style="width: 100%;height: 600px;"></div>
</template><script>export default {name: "hello",props: {dataSource: {}},components: {},data() {return {timerId: null,myChart: null,data:[120, 200, 150, 80, 70, 110, 130],option: {animation: false,xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{type: 'bar',color: {type: 'linear',// x2=1,y=0,柱子的颜色在水平方向渐变x2: 1,y2: 0,colorStops: [// 0%处的颜色{offset: 0,color: '#12c2e9',},// 50%处的颜色{offset: 0.5,color: '#c471ed',},// 100%处的颜色{offset: 1,color: '#f64f59',},],global: false // 缺省为 false}},]},}},created() {},destroyed() {this.myChart.dispose();},mounted() {this.initChart();},methods: {initChart() {// 设置柱形的值this.option.series[0].data = this.data;if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {this.myChart.dispose();}this.myChart = this.$echarts.init(document.getElementById('main'));this.myChart.setOption(this.option);},}}
</script><style scoped></style>

2、径向渐变

刚开始我想把饼图的扇形设置为径向渐变，但出来的效果跟线性渐变差别不大，总是没办法把渐变的起点设置到圆形的中心，所以我还是用pictorialBar来举例，效果看上去更明显。

径向渐变需要确定起点（x,y）和半径(r)。

{type: 'radial',x: 0.3,y: 0.3,r: 0.3,colorStops: [{offset: 0,color: '#ffffff',},{offset: 1,color: '#01c49a',},],global: false // 缺省为 false},

完整代码如下：

<template><!-- 径向渐变色案例 --><div id="main" style="width: 100%;height: 600px;"></div>
</template><script>export default {name: "hello",props: {dataSource: {}},components: {},data() {return {timerId: null,myChart: null,data: [120, 200, 150, 80, 70, 110, 130],option: {animation: false,xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name: '',type: 'pictorialBar',symbolSize: [50, 50],symbolOffset: [-5, -20],itemStyle: {color: function(params) {var colorList = [{type: 'radial',x: 0.3,y: 0.3,r: 0.3,colorStops: [{offset: 0,color: '#ffffff',},{offset: 1,color: '#eb710f',},],global: false // 缺省为 false},{type: 'radial',x: 0.3,y: 0.3,r: 0.3,colorStops: [{offset: 0,color: '#ffffff',},{offset: 1,color: '#01c49a',},],global: false // 缺省为 false},{type: 'radial',x: 0.3,y: 0.3,r: 0.3,colorStops: [{offset: 0,color: '#ffffff',},{offset: 1,color: '#2eb0ee',},],global: false // 缺省为 false},{type: 'radial',x: 0.3,y: 0.3,r: 0.3,colorStops: [{offset: 0,color: '#ffffff',},{offset: 1,color: '#fd359c',},],global: false // 缺省为 false},{type: 'radial',x: 0.3,y: 0.3,r: 0.3,colorStops: [{offset: 0,color: '#ffffff',},{offset: 1,color: '#aa2cbd',},],global: false // 缺省为 false},{type: 'radial',x: 0.3,y: 0.3,r: 0.3,colorStops: [{offset: 0,color: '#ffffff',},{offset: 1,color: '#ff5500',},],global: false // 缺省为 false},{type: 'radial',x: 0.3,y: 0.3,r: 0.3,colorStops: [{offset: 0,color: '#ffffff',},{offset: 1,color: '#0000ff',},],global: false // 缺省为 false},];return colorList[params.dataIndex];},},symbolPosition: 'end',}]},}},created() {},destroyed() {this.myChart.dispose();},mounted() {this.initChart();},methods: {initChart() {// 设置柱形的值this.option.series[0].data = this.data;if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {this.myChart.dispose();}this.myChart = this.$echarts.init(document.getElementById('main'));this.myChart.setOption(this.option);},}}
</script><style scoped></style>

echarts：在vue中使用渐变色相关推荐

vue echarts div变化_数据可视化之echarts在Vue中的使用
数据可视化的本质是将数据通过各种视觉通道映射成图形,可以使得用户更快.更准确的理解数据. 一.为什么选择echarts: 简单上手容易满足绝大部分的开发需要在可视化库中有较好的体验和口碑二.在V ...
【Vue+Echarts】Vue中Echarts图表的使用（三）—— 组件模块调用不同类型的Echarts图表（动态图表生成）
这节也是这个系列最后的一篇文章了. 第二篇文章,将Echarts封装成了组件,在使用的时候,只需将ChartsOption传递进去即可,同时,提供了监听事件,当Option发生变化时,会刷新图表. 因 ...
echarts中x轴 y轴配置(字体颜色，线的颜色，分割线，y周单位颜色)。vue中直接使用echarts以及vue中使用vue-echarts如何配置横向渐变与纵向渐变（后者适用于前者）
vue中直接使用echarts //var myChart = this.$echarts.init(document.getElementById("echart-twoline" ...
3D echarts在vue中的使用
大屏中有时候会用3D 的echarts,效果图如下首先在vue里面的使用,引入就不讲了 <echarts3DPieref="pei3D":DpieData="Dp ...
axios vue 加载效果动画_在vue中通过axios异步使用echarts
现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中 ...
【Echarts】在Vue中使用Echarts
在Vue中使用Echarts 引入第三方库vue-echarts vue-echarts安装与使用 vue2中使用Echarts vue-echarts安装 vue2中使用Echarts vue3中使 ...
vue2.0_在vue中使用echarts图表插件
说明:本例子基于vue-cli脚手架搭建首先,安装echarts依赖 npm install echarts -S 注:安装NodeJS之后,使用npm来安装包使用的是国外的地址,经常会出现超时错误 ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
vue中使用echarts实现动态数据绑定、获取后端接口数据
之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单 ...

echarts：在vue中使用渐变色

1、线性渐变

1.1、垂直方向的渐变

2、径向渐变

echarts：在vue中使用渐变色相关推荐

最新文章

热门文章