首页echarts 顶部为波浪的柱状图 demo

echarts 顶部为波浪的柱状图 demo

时间: 2023-10-17 14:04:22 浏览: 191

以下是一个使用 ECharts 实现顶部为波浪的柱状图的 demo： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 柱状图示例 - 顶部波浪</title> <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '顶部为波浪的柱状图' }, tooltip: {}, xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10], itemStyle: { normal: { barBorderRadius: [5, 5, 0, 0] } }, markLine: { silent: true, symbol: 'none', label: { show: false }, data: [ { yAxis: 80 } ] }, markArea: { silent: true, itemStyle: { color: '#F2F6FC' }, data: [ [ { name: '波浪区域', xAxis: 'min', yAxis: 0 }, { xAxis: 'max', yAxis: 80 } ] ] }, markPoint: { symbol: 'circle', symbolSize: 10, label: { show: false }, data: [ { name: '波峰', xAxis: 'B', yAxis: 50 }, { name: '波谷', xAxis: 'D', yAxis: 30 } ] } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 在这个 demo 中，我们使用了 ECharts 提供的 `markLine`、`markArea` 和 `markPoint` 等标注组件，通过配置这些组件的参数，实现了顶部为波浪的柱状图效果。其中，`markLine` 组件用来绘制图表中的线条，`markArea` 组件用来绘制图表中的区域，`markPoint` 组件用来绘制图表中的点。通过这些组件的配合，我们可以实现各种复杂的图表效果。

阅读全文