echarts绘制聚合散点柱状图
时间: 2023-12-21 11:31:29 浏览: 106
利用Echarts写的柱状图
5星 · 资源好评率100%
以下是使用 echarts 绘制聚合散点柱状图的示例代码:
```javascript
// 引入 echarts
import echarts from 'echarts';
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('chart'));
// 准备数据
var data = [
[1, 6, 12],
[2, 8, 80],
[3, 3, 120]
];
// 设置图表配置项
var option = {
xAxis: {
type: 'category',
data: ['x1', 'x2', 'x3']
},
yAxis: {
type: 'value'
},
series: [{
type: 'scatter',
symbolSize: function (data) {
return data[2] / 10; // 设置点的大小
},
itemStyle: {
color: function (data) {
if (data[1] > 5) {
return 'red'; // 设置点的颜色
} else {
return 'green';
}
}
},
data: data.map(function (item) {
return [item[0], item[1]];
})
}]
};
// 使用配置项显示图表
myChart.setOption(option);
```
这段代码使用 echarts 绘制了一个聚合散点柱状图,其中 x 轴表示 x 坐标,y 轴表示 y 坐标,点的大小和颜色根据数据进行设置。你可以根据自己的需求修改数据和配置项来绘制不同的聚合散点柱状图。
阅读全文