首页echarts好看的柱状图

echarts好看的柱状图

时间: 2023-07-08 15:45:58 浏览: 129

ECharts 是一个基于 JavaScript 的开源可视化库，支持多种类型的图表，包括柱状图。以下是一个简单的示例展示如何使用 ECharts 实现一个好看的柱状图： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>好看的柱状图</title>  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body>  <div id="chart" style="width: 600px;height:400px;"></div> <script> // 基于准备好的 DOM，初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('chart')); // 指定图表的配置项和数据 var option = { title: { text: '好看的柱状图', textStyle: { color: '#333', fontSize: 20, fontWeight: 'bold' }, left: 'center' }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLine: { lineStyle: { color: '#999' } } }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } } }, series: [{ name: '销量', type: 'bar', data: [120, 200, 150, 80, 70, 110, 130], itemStyle: { color: '#2db7f5', emphasis: { color: '#2db7f5' } } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 该示例中，我们使用了 ECharts 提供的柱状图类型，并设置了一些配置项，如标题、坐标轴样式、数据等，最终生成了一个好看的柱状图。你可以根据自己的需求修改和调整配置项以达到更好的效果。

阅读全文