echarts双形柱状图
时间: 2023-08-27 09:21:08 浏览: 53
echarts双形柱状图是一种可以同时展示两个数据系列的柱状图。在给定的代码中,第一个数据系列是一个无实际意义的柱状图,用于创建一个背景,使第二个数据系列的柱状图看起来是重叠在上面的。该代码使用ECharts库来实现,通过指定图表的配置项和数据,可以创建一个双形柱状图。对于这个例子来说,第一个数据系列的柱状图颜色为灰色,不显示,只是用来创建背景。第二个数据系列的柱状图颜色为红色,显示实际的数据。其中,x轴表示各个类别,y轴表示数据的数值。这样,就可以实现一个重叠柱状图效果,用于展示不同类别的数据增长率。<span class="em">1</span>
#### 引用[.reference_title]
- *1* [ECharts 实现重叠柱状图](https://blog.csdn.net/qq_38974638/article/details/109034722)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
相关问题
echarts双列柱状图
以下是使用Echarts制作双列柱状图的示例代码:
```javascript
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
// 初始化图表
var myChart = echarts.init(document.getElementById('main'));
// 配置项
var option = {
title: {
text: '双列柱状图'
},
tooltip: {},
legend: {
data:['销量', '利润']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: [
{
name: '销量',
type: 'value'
},
{
name: '利润',
type: 'value'
}
],
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},
{
name: '利润',
type: 'bar',
yAxisIndex: 1,
data: [2, 10, 18, 4, 4, 8]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
以上代码中,我们使用了Echarts的柱状图(bar)和提示框(tooltip)和标题组件(title)。其中,xAxis表示x轴数据,yAxis表示y轴数据,series表示数据系列。在yAxis中,我们使用了两个y轴,分别表示销量和利润。在series中,我们使用了两个数据系列,分别表示销量和利润。通过设置yAxisIndex属性,我们将利润数据系列绑定到第二个y轴上。
echarts双横向柱状图
你可以使用 ECharts 来创建双横向柱状图。以下是一个使用 ECharts 的示例代码来绘制双横向柱状图的方法:
```javascript
// 引入 ECharts
import echarts from 'echarts';
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 自定义数据
var data = [
{ name: '类别1', value1: 100, value2: 200 },
{ name: '类别2', value1: 150, value2: 120 },
{ name: '类别3', value1: 70, value2: 90 },
{ name: '类别4', value1: 200, value2: 180 },
];
// 提取数据中的 value1 和 value2 列
var value1Data = data.map(item => item.value1);
var value2Data = data.map(item => item.value2);
// 可以根据需要自定义配置项
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' // 阴影指示器
}
},
legend: {
data: ['值1', '值2']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value'
}
],
yAxis: [
{
type: 'category',
data: data.map(item => item.name)
}
],
series: [
{
name: '值1',
type: 'bar',
data: value1Data,
label: {
show: true,
position: 'inside'
}
},
{
name: '值2',
type: 'bar',
data: value2Data,
label: {
show: true,
position: 'inside'
}
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
```
上述代码中,我们首先引入了 ECharts,并且基于一个指定的 DOM 元素初始化了一个 ECharts 实例(`myChart`)。然后,我们定义了需要展示的数据(`data`)和两个柱状图系列的数值数据(`value1Data` 和 `value2Data`)。接下来,我们可以根据需要自定义配置项(`option`),其中包括图表的样式、轴配置、系列配置等。最后,使用 `setOption` 方法将配置项应用到 ECharts 实例上,从而显示出双横向柱状图。
请确保在使用该代码之前已经正确引入了 ECharts 库,并将一个具有指定 id 的 DOM 元素作为容器。你可以根据实际需求对代码进行调整和扩展。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)