首页用Web echarts 绘制折线图示例

用Web echarts 绘制折线图示例

时间: 2024-10-14 18:14:21 浏览: 32

Web Echarts是一款强大的JavaScript图表库，用于创建交互式图表。下面是一个简单的例子，展示如何使用ECharts绘制折线图： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>ECharts折线图示例</title>  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script> // 数据 var data = [[0, 20], [10, 40], [20, 60], [30, 80], [40, 100]]; // 初始化图表 var myChart = echarts.init(document.getElementById('main')); // 设置图表配置项 var option = { title: { text: '折线图示例' }, tooltip: {}, xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: { type: 'value' }, series: [{ name: '销量', type: 'line', data: data }] }; // 渲染图表 myChart.setOption(option); </script> </body> </html> ``` 在这个例子中，我们首先引入了ECharts的库，然后创建了一个div来放置图表。接着，数据`data`定义了一条简单的折线数据，X轴是分类数据，Y轴表示数值。最后，通过`myChart.setOption(option)`设置选项并渲染图形。

阅读全文