×
全部 > AI技术 > AI编程 > AI代码生成 > 生成ECharts折线图代码展示月销售额

生成ECharts折线图代码展示月销售额

通义千问2.5-Coder-32B(阿里云百炼)

根据您的需求,我将生成一个展示每月销售额变化的折线图,使用 ECharts 图表库。由于您没有提供具体的数据,我将使用一个合理的样例数据来展示。 以下是生成的代码: ```markdown ```javascript // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '每月销售额变化' }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] }, yAxis: { type: 'value', name: '销售额 (单位: 万元)' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130, 180, 190, 170, 160, 210], type: 'line' }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); ``` ``` 请确保在 HTML 文件中有一个具有 `id="main"` 的 DOM 元素来承载这个图表。例如: ```html <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="main" style="height: 100%"></div> <!-- 引入 ECharts 文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script> // 上面生成的 JavaScript 代码放在这里 </script> </body> </html> ``` 这样就可以在网页上显示一个展示每月销售额变化的折线图了。

DeepSeek V3(Deepseek)

我将为您生成一个展示每月销售额变化的ECharts折线图代码。由于您没有提供具体数据,我将使用合理的样例数据进行演示。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>月度销售额变化</title> <!-- 引入 ECharts 文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个具备大小的 DOM --> <div id="main" style="width: 800px;height:500px;"></div> <script type="text/javascript"> // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '2023年月度销售额变化', subtext: '单位:万元', left: 'center' }, tooltip: { trigger: 'axis', formatter: '{b}<br/>{a}: {c}万元' }, legend: { data: ['销售额'], left: 'left' }, xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], axisLabel: { interval: 0 } }, yAxis: { type: 'value', name: '销售额(万元)', axisLine: { show: true }, axisLabel: { formatter: '{value}' } }, series: [{ name: '销售额', type: 'line', data: [120, 132, 145, 160, 172, 190, 210, 232, 256, 280, 295, 310], smooth: true, itemStyle: { color: '#5470C6' }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(84, 112, 198, 0.5)' }, { offset: 1, color: 'rgba(84, 112, 198, 0.1)' } ]) }, markPoint: { data: [ { type: 'max', name: '最大值' }, { type: 'min', name: '最小值' } ] }, markLine: { data: [{ type: 'average', name: '平均值' }] } }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); // 响应式调整 window.addEventListener('resize', function() { myChart.resize(); }); </script> </body> </html> ``` 这个折线图包含以下特点: 1. 展示了12个月的销售额变化趋势 2. 添加了平滑曲线和面积渐变效果 3. 包含最大值、最小值和平均值的标记 4. 响应式设计,随窗口大小自动调整 5. 添加了适当的标题、坐标轴标签和图例 您可以将实际数据替换`series.data`数组中的值,以及调整`xAxis.data`中的月份标签。如需进一步定制,可以修改颜色、添加更多数据系列或调整其他图表配置项。

gpt-4o(OpenAI)

为了生成一个每月销售额变化的折线图,首先我们需要一些数据。假设我们有以下每个月的销售额数据: - 一月: 5000 - 二月: 6300 - 三月: 7100 - 四月: 8500 - 五月: 9200 - 六月: 10200 - 七月: 11300 - 八月: 9900 - 九月: 10500 - 十月: 11800 - 十一月: 12300 - 十二月: 13000 接下来,我们使用 ECharts 来生成图表代码。 ```markdown ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>每月销售额变化折线图</title> <!-- Include ECharts library --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <!-- Create a DOM node for ECharts --> <div id="main" style="width: 600px;height:400px;"></div> <script> // Initialize the chart var myChart = echarts.init(document.getElementById('main')); // Specify chart configuration var option = { title: { text: '每月销售额变化' }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] }, yAxis: { type: 'value' }, series: [{ name: '销售额', type: 'line', data: [5000, 6300, 7100, 8500, 9200, 10200, 11300, 9900, 10500, 11800, 12300, 13000] }] }; // Use the specified chart configuration item and data to show chart. myChart.setOption(option); </script> </body> </html> ``` ```

claude3.5 sonnet 20241022(Anthropic)

根据您的请求,我将生成一个展示每月销售额变化的折线图的 ECharts 代码。以下是代码示例: ```markdown ```javascript var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '每月销售额变化' }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] }, yAxis: { type: 'value', name: '销售额 (元)', min: 0 }, series: [{ name: '销售额', type: 'line', data: [12000, 15000, 18000, 13000, 16000, 20000, 22000, 21000, 24000, 23000, 25000, 27000] // 示例数据 }] }; myChart.setOption(option); ``` ``` 请注意,数据部分是示例数据,您可以根据实际情况进行调整。如果您有任何其他需求或需要进一步修改,请告诉我!

模型名称 模型提供商 响应总时长(s) 生成 token 数 首 token 延迟(s) 生成速率(tokens/s)
15.12
466
0.49
延迟最小
30.83
40.8
797
内容最多
2.69
19.54
15.04
491
4.3
32.65
速度最快
8.32
响应最快
0
2.33
0
AI文本生成
38家服务商提供服务
AI深度推理
11家服务商提供服务
AI代码生成
11家服务商提供服务
AI数学模型
10家服务商提供服务