<script src="https://unpkg.com/echarts@5.4.2/dist/echarts.min.js"></script>echarts 需要元素可以获取 clientWidth 和 clientHeight，所以元素需要至少设置宽高中的一个。
<div id="chart" style="height: 300px;"></div>
<script>
const chart = echarts.init (document.getElementById ('chart'));
let option = {
xAxis: {
type: 'category',
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
yAxis: {},
series: [
{
type: 'bar',
name: '2015',
data: [89.3, 92.1, 94.4, 85.4]
},
{
type: 'bar',
name: '2016',
data: [95.8, 89.4, 91.2, 76.9]
},
{
type: 'bar',
name: '2017',
data: [97.7, 83.1, 92.5, 78.1]
}
]
};
chart.setOption (option);
</script>在每个系列单独设置在 option 的 series 中，可以为每组数据设计图表
let option = {
xAxis: {
type: "category",
name: "日期"
data: ["2022-1-3", "2022-1-4", "2022-1-5"],
},
yAxis: {},
series: [
{
type: "bar",
name: "总数量",
data: [1, 11, 14, 14, 19],
},
{
type: "line",
name: "每日变化",
data: [1, 10, 3, 0, 5],
},
],
};使用数据集的好处是数据能集中管理一波，和图表设置分开。
let option = {
legend: {},
dataset: {
source: [
["日期", "总数量", "每日变化"],
["2022-1-3", 1, 10],
["2022-1-4", 11, 4],
["2022-1-5", 15, 0],
],
},
xAxis: {
type: "category",
},
yAxis: {},
series: [
{
type: "bar",
},
{
type: "line",
smooth: true,
},
],
};