把下面代码柱子颜色改成不一样的并给出代码thisdefineload3 function o2loadechartUrl function 基于准备好的dom初始化echarts实例 var mySale = echartsinitdocumentgetElementByIdsale; 指定图表的配置项和数据 var data = date 20
将代码中的柱状图和折线图的颜色改成不一样的,可以通过修改series中的itemStyle属性来实现。具体代码如下:
this.define("load3", function () {
o2.load(echartUrl, function () {
// 基于准备好的dom,初始化echarts实例
var mySale = echarts.init(document.getElementById('sale'));
// 指定图表的配置项和数据
var data = [
{ date: '2021-01-01', orders: 100 },
{ date: '2021-01-02', orders: 150 },
{ date: '2021-01-03', orders: 120 },
{ date: '2021-01-04', orders: 180 },
{ date: '2021-01-05', orders: 200 },
{ date: '2021-01-06', orders: 160 },
{ date: '2021-01-07', orders: 220 }
];
// 配置项
var option = {
title: {
text: '食堂订单数量变化图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['订单数量']
},
xAxis: {
data: data.map(item => item.date)
},
yAxis: [
{
type: 'value',
name: '订单数量',
min: 0,
max: Math.max(...data.map(item => item.orders)) + 50,
axisLabel: {
formatter: '{value} 个'
}
}
],
series: [
{
name: '订单数量',
type: 'bar',
itemStyle: {
color: 'blue' // 修改柱状图的颜色
},
data: data.map(item => item.orders)
},
{
name: '订单数量',
type: 'line',
itemStyle: {
color: 'red' // 修改折线图的颜色
},
data: data.map(item => item.orders)
}
]
};
// 使用刚指定的配置项和数据显示图表。
mySale.setOption(option);
}.bind(this));
});
``
原文地址: http://www.cveoy.top/t/topic/ieUl 著作权归作者所有。请勿转载和采集!