Echarts图表渐变效果实现 - 热销菜品排行top10

this.define("load", function () { o2.load(echartUrl, function () { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '热销菜品排行top10', textStyle: { color: '#333', fontSize: 16, fontWeight: 'bold' } }, tooltip: { backgroundColor: 'rgba(0,0,0,0.8)', textStyle: { color: '#fff', fontSize: 14 } }, legend: { data: [{ name: '销量', textStyle: { color: '#333', fontSize: 14 } }], textStyle: { color: '#666', fontSize: 12 } }, xAxis: { data: ['扣肉', '白切鸡', '柠檬鸭', '酸菜鱼', '莲藕', '空心菜'], axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666', fontSize: 12 } }, yAxis: { axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666', fontSize: 12 }, splitLine: { show: true, lineStyle: { color: '#eee' } } }, series: [ { name: '销量', type: 'bar', smooth: true, data: [100, 90, 100, 110, 60, 50], itemStyle: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#ff8c00'}, {offset: 1, color: '#ff4500'} ] ) }, emphasis: { itemStyle: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#ff8c00'}, {offset: 1, color: '#ff4500'} ] ) } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }.bind(this)); });