<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
</head>
<style>
#chart {
width: 600px;
height: 400px;
}
</style>
<body>
<div id="chart"></div>
</body>
</html>
<script>
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom, 'essos', {renderer: 'svg'});
chart.setOption({
dataset: {
source: [
['一季度', 100, 79, '分类一', 50],
['二季度', 112, 81, '分类二', 60],
['三季度', 96, 88, '分类三', 55],
['四季度', 123, 72, '分类四', 80]
]
},
title: {
text: 'Echarts入门',
subtext: '副标题' // 表示副标题
},
xAxis: {
data: ['一季度', '二季度', '三季度', '四季度']
},
yAxis: {},
legend: { // 种类 此案例分三种，；饼图，折线图，柱状图
data: [
{
name: '饼图',
icon: 'circle',
textStyle: {
color: 'blue',
backgroundColor: 'yellow'
}
}, '折线图', '柱状图'], // 需·······要和series里的属性进行绑定。，此属性为name值
left: 100,
top: 20
},
toolbox: {
feature: {
restore: {}, // 还原
saveAsImage: {}, // 保存图像
dataZoom: [
{
show: true,
start: 0,
end: 100
}
]
}
},
grid: {
top: 100,
left: 100
},
series: [
{
name: '饼图',
type: 'pie',
center: ['65%', 60],
radius: 35,
encode: {
itemName: 3,
value: 4
}
},
{
name: '折线图',
type: 'line',
encode: {x: 0, y: 1}
},
{
name: '柱状图',
type: 'bar',
encode: {x: 0, y: 2}
}
]
});
</script>
效果如下：
