来一份柱形图的练习数据
时间: 2023-03-26 20:00:59 浏览: 76
好的,以下是柱形图的练习数据:
| 月份 | 销售额 |
| ---- | ---- |
| 1月 | 100 |
| 2月 | 120 |
| 3月 | 800 |
| 4月 | 150 |
| 5月 | 130 |
| 6月 | 110 |
| 7月 | 140 |
| 8月 | 170 |
| 9月 | 900 |
| 10月 | 120 |
| 11月 | 100 |
| 12月 | 130 |
相关问题
echarts 柱形图百分数数据
要在echarts柱形图中显示百分数数据,你可以使用label的formatter属性进行设置。你可以在关键代码中找到如下部分:
```
label: {
normal: {
show: true,
position: "top",
color: "#000",
fontSize: 20,
formatter: "{c}%"
},
},
```
其中formatter属性中的"{c}%"表示将数据以百分数形式显示在柱形图上。这样设置后,柱形图上的数据将以百分数形式显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Echarts柱形图顶部合计](https://blog.csdn.net/Sunshine_Jian/article/details/121168045)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [使用ECharts制作柱形图](https://blog.csdn.net/m0_71933813/article/details/127719405)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
echarts柱形图设置数据交互
要设置数据交互,可以使用 echarts 的 dataZoom 组件和 tooltip 组件。
首先,需要在 echarts 的 option 中配置 dataZoom 组件。例如:
```
option = {
...
dataZoom: {
type: 'slider',
start: 0,
end: 100
},
...
}
```
这会在图表下方添加一个滑块,用于缩放数据。
接下来,需要在 option 中配置 tooltip 组件。例如:
```
option = {
...
tooltip: {
trigger: 'axis'
},
...
}
```
这会启用 tooltip 组件,并将其触发方式设置为坐标轴轴线触发。
然后,可以在 series 中指定每个系列的数据。例如:
```
option = {
...
series: [
{
name: '销量',
type: 'bar',
data: [100, 200, 300, 400, 500]
}
],
...
}
```
这会创建一个名为“销量”的柱形图系列,并将其数据设置为 [100, 200, 300, 400, 500]。
最后,将 option 传递给 echarts 实例的 setOption 方法即可。例如:
```
var myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption(option);
```
这样就可以在页面中显示柱形图,并且支持数据交互了。当用户拖动滑块时,数据会自动缩放,当用户将鼠标悬停在柱形上时,会显示该柱形的具体数值。