首页用Web echarts 绘制数图示例

用Web echarts 绘制数图示例

时间: 2024-10-14 18:14:22 浏览: 24

Web Echarts是一款强大的JavaScript图表库，用于在网页上创建各种复杂的图表。下面是一个简单的例子，展示如何使用ECharts绘制线形图： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 数据准备 var data = [[0, 5], [1, 20], [2, 36], [3, 100]]; // 初始化图表实例 var myChart = echarts.init(document.getElementById('main')); // 设置图表配置项 var option = { title: { text: '简单折线图' }, tooltip: {}, xAxis: { type: 'category', data: ['A', 'B', 'C', 'D'] }, yAxis: { type: 'value' }, series: [{ name: '销量', type: 'line', data: data }] }; // 渲染图表 myChart.setOption(option); </script> </body> </html> ``` 在这个例子中，我们首先引入了ECharts库，然后创建了一个ID为'main'的HTML元素作为图表容器。接着，我们定义了一组数据`data`，它表示各个分类的数值。配置选项里设置了标题、轴标签以及线条类型。最后，通过`myChart.setOption(option)`渲染图表。

阅读全文