echarts简介
echarts是百度出品的一款开源JS柱状图框架，目前市面柱状图大部分都是使用这款echarts。作为前端开发者不得不学好echarts框架，echarts文档太复杂，我的站长站精简了使用方法，不看原理，只给出使用示例。
官网：https://echarts.apache.org/zh/
文档：https://echarts.apache.org/zh/feature.html
示例：https://echarts.apache.org/examples/zh/index.html
柱状图完整示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = {
title: {
text: "变电站数量统计",
},
//鼠标指向柱状图浮出详情
tooltip: {},
xAxis: {
type: "category",
data: ["福建", "泉州", "宁德", "厦门", "福州"],
},
yAxis: {
type: "value",
name: "数量",
},
series: [
{
name: "数量",
type: "bar",
data: [
Math.floor(Math.random() * 100),
Math.floor(Math.random() * 100),
Math.floor(Math.random() * 100),
Math.floor(Math.random() * 100),
Math.floor(Math.random() * 100),
],
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>饼状图完整示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = {
title: {
text: "变电站数量统计",
},
//鼠标指向柱状图浮出详情
tooltip: {},
series: [
{
type: "pie",
data: [
{
value: Math.floor(Math.random() * 100),
name: "泉州",
},
{
value: Math.floor(Math.random() * 100),
name: "宁德",
},
{
value: Math.floor(Math.random() * 100),
name: "厦门",
},
{
value: Math.floor(Math.random() * 100),
name: "福州",
},
],
radius: "50%",
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>echarts配置方法
echarts全部的配置参数可以下面这篇文章，代码太长了，新开了一篇。你只需要找到需要修改的地方，复制粘贴即可。
相关信息
echarts柱状图样式参数
1：线条/节点颜色series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', itemStyle: { normal: { color: &...
