首页'echarts'折线图实现用电量折线图

'echarts'折线图实现用电量折线图

时间: 2023-07-25 11:48:47 浏览: 221

好的，以下是实现用电量折线图的代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts 折线图示例</title>  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <body>  <div id="myChart" style="width: 800px;height: 600px;"></div> <script> // 基于准备好的 DOM，初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('myChart')); // 指定图表的配置项和数据 var option = { title: { text: '用电量折线图' }, tooltip: {}, legend: { data:['用电量'] }, xAxis: { data: ['周一','周二','周三','周四','周五','周六','周日'] }, yAxis: {}, series: [{ name: '用电量', type: 'line', data: [120, 132, 101, 134, 90, 230, 210] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 在上述代码中，我们通过 `echarts.init` 方法初始化了一个 ECharts 实例，并且通过 `option` 对象定义了折线图的配置项和数据。其中，`title` 属性用于设置图表的标题，`tooltip` 属性用于设置提示框组件，`legend` 属性用于设置图例组件，`xAxis` 属性用于设置 X 轴，`yAxis` 属性用于设置 Y 轴，`series` 属性用于设置系列数据。在 `series` 中，我们设置了一个名为 `用电量` 的系列，类型为线性图，数据为 `[120, 132, 101, 134, 90, 230, 210]`，表示一周内每天的用电量。通过 `myChart.setOption(option)` 方法将配置项和数据应用到图表中，最终呈现出一张用电量折线图。

阅读全文