echarts饼图柱状图
时间: 2023-10-17 13:30:05 浏览: 50
您想了解 echarts 中的饼图和柱状图吗?这两种图表都是 echarts 提供的常见图表类型之一。
饼图:
饼图用于展示数据的占比关系,适用于显示相对比例。在 echarts 中,您可以通过配置数据项和设置相关属性来创建饼图。例如,您可以设置每个数据项的名称、数值、颜色等。饼图可以通过鼠标悬停显示详细信息或进行交互操作。
柱状图:
柱状图用于展示数据的数量或大小比较,适用于显示绝对数值。在 echarts 中,您可以通过配置数据项和设置相关属性来创建柱状图。例如,您可以设置每个数据项的名称、数值、颜色等。柱状图可以通过鼠标悬停显示详细信息或进行交互操作。
如果您有具体的问题或需要更详细的示例代码,请告诉我。
相关问题
echarts 饼图柱状图切换
您可以使用 echarts 提供的图例组件和切换组件来实现饼图和柱状图的切换。具体操作如下:
1. 在 option 中设置 legend,包含饼图和柱状图的名称。
2. 在 option 中设置 series,分别对应饼图和柱状图的数据。
3. 在 option 中设置 toolbox,里面包含一个切换组件,用于切换饼图和柱状图。
示例代码如下:
```js
option = {
...
legend: {
data:['饼图', '柱状图'],
selected: {
'饼图': true,
'柱状图': false
}
},
series: [{
name: '饼图',
type: 'pie',
data: [
{value: 335, name: 'A'},
{value: 310, name: 'B'},
{value: 234, name: 'C'},
{value: 135, name: 'D'},
{value: 1548, name: 'E'}
],
label: {
show: true,
formatter: '{b}: {c} ({d}%)'
}
}, {
name: '柱状图',
type: 'bar',
data: [320, 332, 301, 334, 390, 330, 320],
label: {
show: true,
position: 'top'
}
}],
toolbox: {
feature: {
mySwitch: {
show: true,
title: {
pie: '切换到饼图',
bar: '切换到柱状图'
},
iconStyle: {
emphasis: {
borderColor: '#1E90FF'
}
},
icon: 'path://M303.557 497.504c-7.81 0-15.679-2.97-21.678-8.969l-157.084-157.084c-11.949-11.949-11.949-31.36 0-43.308s31.36-11.949 43.309 0l135.405 135.404v-358.395c0-16.277 13.199-29.477 29.477-29.477s29.477 13.199 29.477 29.477v358.394l135.404-135.404c11.948-11.949 31.36-11.949 43.308 0s11.949 31.36 0 43.309l-157.084 157.084c-6 6-13.87 8.969-21.679 8.969z',
onclick: function (params, charts) {
var option = charts.getOption();
if (option.legend[0].selected['饼图']) {
option.legend[0].selected = {
'饼图': false,
'柱状图': true
};
option.series[0].name = '柱状图';
option.toolbox.feature.mySwitch.title = {
pie: '切换到饼图',
bar: '切换到柱状图'
};
} else {
option.legend[0].selected = {
'饼图': true,
'柱状图': false
};
option.series[0].name = '饼图';
option.toolbox.feature.mySwitch.title = {
pie: '切换到柱状图',
bar: '切换到饼图'
};
}
charts.setOption(option);
}
}
}
}
...
};
```
echarts 饼图和柱状图联动
可以通过 echarts 中的数据联动和事件联动实现饼图和柱状图的联动。具体步骤如下:
1. 在饼图和柱状图的 option 中分别定义一个相同的 dataZoom 组件,设置 type 为 inside,使得两个图表的缩放范围相同。
2. 在饼图和柱状图的 option 中分别定义一个相同的 toolbox 组件,并设置 feature.dataView.show 为 true,使得用户可以查看数据。
3. 在饼图和柱状图的 option 中分别定义一个相同的 brush 组件,设置 toolbox 中的 feature.dataView 和 brush 组件的关联,使得用户可以通过 brush 组件框选某一部分数据并查看。
4. 在饼图和柱状图的 option 中分别定义一个相同的 tooltip 组件,设置 trigger 为 'axis',使得饼图和柱状图的 tooltip 显示方式相同。
5. 在饼图和柱状图的 option 中分别定义一个相同的 series-name,使得在 brush 组件框选某一部分数据时,饼图和柱状图的 tooltip 内容相同。
这样饼图和柱状图就可以实现数据联动和事件联动,达到联动效果。