Echarts四个不同的单位折线图如何合成一张图的代码如何编写
时间: 2023-03-13 10:30:46 浏览: 53
可以使用 echarts 的折线图组件来绘制多条折线,具体请参考以下代码:option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', unit: 'A' }, { data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', unit: 'B' }, { data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', unit: 'C' }, { data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', unit: 'D' }] };
相关问题
echarts折线图 多个折线代码示例
以下是一个使用 ECharts 绘制多个折线图的示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 示例</title>
<!-- 引入 ECharts.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<!-- 用于展示折线图的容器 -->
<div id="myChart" style="width: 600px; height: 400px;"></div>
<script>
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var option = {
legend: {
data: ['折线1', '折线2']
},
xAxis: {
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月', '六月']
},
yAxis: {
type: 'value'
},
series: [{
name: '折线1',
type: 'line',
data: [10, 20, 30, 40, 50, 60]
}, {
name: '折线2',
type: 'line',
data: [20, 30, 40, 50, 60, 70]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
该示例中,我们创建了一个 ECharts 实例,指定了图表的容器,在页面中展示了两条折线,并给它们分别命名为“折线1”和“折线2”;同时设置了 x 轴为类别型,y 轴为数值型,每个类别对应一对数据点。您可以根据需要修改数据,添加或删除折线,调整图表的布局等。
使用echarts画一个日期折线图代码
当然可以!下面是使用 echarts 绘制日期折线图的示例代码:
```javascript
// 引入 echarts
import echarts from 'echarts';
// 获取图表容器
const chartContainer = document.getElementById('chart');
// 初始化图表
const chart = echarts.init(chartContainer);
// 准备数据
const data = [
{ date: '2022-01-01', value: 100 },
{ date: '2022-01-02', value: 200 },
{ date: '2022-01-03', value: 150 },
// 更多数据...
];
// 提取日期和数值
const dates = data.map(item => item.date);
const values = data.map(item => item.value);
// 配置选项
const options = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
xAxis: {
type: 'category',
data: dates
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
data: values
}]
};
// 渲染图表
chart.setOption(options);
```
上述代码假设你已经安装了 echarts,并且有一个 id 为 "chart" 的 DOM 元素作为图表容器。你可以根据实际需求修改数据和配置选项,以适应你的项目。希望这能帮到你!如果有任何问题,请随时提问。