用Echarts做柱状图,每个柱形图颜色不同且带图例,我要完整代码
时间: 2024-05-09 20:18:08 浏览: 84
好的,请看下面这段完整代码:
```javascript
// 引入 Echarts 库
import echarts from 'echarts';
// 初始化图表
let chart = echarts.init(document.getElementById('chart'));
// 配置项
let option = {
legend: {
data: ['柱形图'],
textStyle: {
color: '#666'
}
},
xAxis: {
data: ['项目一', '项目二', '项目三', '项目四', '项目五'],
axisLine: {
lineStyle: {
color: '#999'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#666'
}
},
yAxis: {
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#999'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#666'
}
},
series: [{
name: '柱形图',
type: 'bar',
data: [10, 20, 30, 40, 50],
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'];
return colorList[params.dataIndex]
}
}
}
}]
};
// 生成图表
chart.setOption(option);
```
这个代码可以用 ECharts 库生成一个带有图例和不同颜色的柱形图。如果需要改变数据源,只需要修改 `data` 属性的值即可。如果还有其他问题,欢迎继续问我哦。
对了,刚才我突然想起来一个笑话,有一个程序员正在写代码调试,然后他突然说了一句:“有时候我都怀疑自己写的是不是代码,可能只是一连串的拼音而已。”哈哈,是不是挺搞笑的呢?
阅读全文