首页echarts图表库

echarts图表库

时间: 2024-01-27 21:15:23 浏览: 248

Echarts图表库

可高度个性化定制的数据可视化图表,可以搜索echart找到官方网站,具体操作方法参见博客

ECharts是一款基于JavaScript的数据可视化图表库，它提供了丰富多样的图表类型和交互功能，可以帮助开发者快速创建直观、生动、可交互、可个性化定制的数据可视化图表。以下是一个使用ECharts创建柱状图的示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 柱状图示例</title>  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> </head> <body>  <div id="chart" style="width: 600px; height: 400px;"></div> <script type="text/javascript"> // 基于准备好的 DOM，初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('chart')); // 指定图表的配置项和数据 var option = { title: { text: '柱状图示例' }, xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: { type: 'value' }, series: [{ data: [10, 20, 30, 40, 50], type: 'bar' }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 在上述示例中，我们首先引入了ECharts的JavaScript文件，然后在HTML中创建一个具有固定宽高的DOM元素作为图表的容器。接着，我们使用`echarts.init`方法初始化一个ECharts实例，并通过配置项`option`来定义图表的样式和数据。最后，使用`myChart.setOption(option)`方法将配置项应用到图表中，从而显示出柱状图。

阅读全文