首页earchars完整案例

earchars完整案例

时间: 2024-09-23 11:05:45 浏览: 39

ECharts是一个强大的数据可视化库，它提供了一系列图表组件，如柱状图、折线图、饼图等，以及丰富的交互功能。下面是一个简单的ECharts完整案例，展示如何创建一个折线图： ```html <!DOCTYPE html> <html> <head> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.0/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script> // 数据 var data = { labels: ['一月', '二月', '三月', '四月', '五月', '六月'], values: [50, 80, 90, 100, 120, 130] }; // 初始化图表实例 var myChart = echarts.init(document.getElementById('main')); // 配置项 var option = { title: { text: 'ECharts折线图示例' }, tooltip: {}, xAxis: { data: data.labels }, yAxis: {}, series: [{ name: '销售额', type: 'line', data: data.values }] }; // 绘制图表 myChart.setOption(option); </script> </body> </html> ``` 在这个例子中，我们首先引入了ECharts库，然后定义了一个包含月份标签和对应数值的数据对象。接着，我们在HTML中创建了一个div容器，并通过JavaScript初始化了一个ECharts实例。配置项`option`指定了图表的标题、轴标签、系列类型和数据，最后通过`setOption`方法将配置应用到图表上。

阅读全文