一、设置渐变色
在echarts中,我们可以使用渐变色来美化数据图表。设置渐变色的方法如下:
option = { series: [{ type: 'bar', data: [10, 20, 30, 40], itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#83bff6'}, {offset: 0.5, color: '#188df0'}, {offset: 1, color: '#188df0'} ] ) } } }] };
上述代码中,我们在itemStyle中设置了normal下的color为一个LinearGradient。LinearGradient可以接收四个参数:渐变起点x坐标,渐变起点y坐标,渐变终点x坐标,渐变终点y坐标。同时,我们还在LinearGradient中传入了一个数组作为渐变的颜色值,数组中每一项是一个对象,包含了offset和color两个属性。offset代表渐变的位置,如上述代码中,offset为0代表从渐变起点0向终点1变化,颜色为#83bff6,offset为1代表从渐变起点0向终点1变化,颜色为#188df0。
二、渐变色失效
在设置渐变色时,存在一些问题可能导致渐变色失效。其中,最常见的有以下两种情况:
1、没有设置series中的颜色值为'none'。
option = { series: [{ type: 'bar', data: [10, 20, 30, 40], itemStyle: { normal: { color: 'none', borderColor: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#83bff6'}, {offset: 0.5, color: '#188df0'}, {offset: 1, color: '#188df0'} ] ), borderWidth: 2 } } }] };
上述代码中,我们在设置LinearGradient时,同时设置了borderColor和borderWidth。同时也将color值设置为了'none'。这样做的目的是让borderColor生效。
2、没有在设置颜色时加上new关键字。
option = { series: [{ type: 'bar', data: [10, 20, 30, 40], itemStyle: { normal: { color: echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#83bff6'}, {offset: 0.5, color: '#188df0'}, {offset: 1, color: '#188df0'} ] ) } } }] };
上述代码中,我们在设置LinearGradient时,没有加上new关键字。这将导致渐变色失效,因此在设置LinearGradient时,请务必加上new关键字。
三、柱状图渐变
在echarts中,我们可以使用渐变色来美化柱状图。设置渐变色的方法如下:
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'bar', itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#7FFFD4'}, {offset: 0.5, color: '#2E8B57'}, {offset: 1, color: '#228B22'}, ] ) } } }] };
上述代码中,我们设置了一个柱状图,并在其中加入了渐变色。设置渐变色的方法与前面介绍的一致。
四、图表渐变
在echarts中,除了柱状图之外,我们还可以给其他类型的图表设置渐变色。例如下面这个折线图:
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', areaStyle: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: 'red'}, {offset: 0.5, color: 'blue'}, {offset: 1, color: 'green'}, ] ) } }] };
上述代码中,我们设置了一个折线图,并在其中加入了渐变色。在实现渐变色时,我们将color属性改为了areaStyle属性。
五、设置颜色
在echarts中,我们有多种方法可以设置数据点的颜色。例如下面这个柱状图:
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'bar', itemStyle: { normal: { color: function(params) { var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0' ]; return colorList[params.dataIndex] } } } }] };
上述代码中,我们使用函数来设置颜色。在函数中,我们定义了一个colorList数组,包含了16种不同的颜色。然后,我们在返回值中使用params.dataIndex来获取每个数据点的索引,再返回相应的颜色值。这种方法可以帮助我们动态设置颜色,避免颜色过于单一。
六、改颜色
在数据变化时,我们可能需要改变echarts中数据点的颜色。例如下面这个柱状图:
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'bar', itemStyle: { normal: { color: function(params) { var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0' ]; return colorList[params.dataIndex] } } } }] }; // 数据变化,改变颜色 var myChart = echarts.init(document.getElementById('main')); var currentIndex = -1; setInterval(function() { var dataLen = option.series[0].data.length; // 取消之前高亮的图形 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: currentIndex }); currentIndex = (currentIndex + 1) % dataLen; // 高亮当前图形 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: currentIndex }); // 显示 tooltip myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: currentIndex }); }, 1000);
上述代码中,我们设置了一个柱状图,并给每个数据点使用函数动态设置了颜色。然后,我们在数据变化时,使用setInterval定时器来改变echarts中数据点的颜色。具体实现方法是:使用echarts的dispatchAction方法来取消原来高亮的数据点,然后再高亮当前的数据点,并显示tooltip。这种方法可以让我们更加灵活地控制echarts中数据点的颜色。