工具包：
1.第三方可视化图表库:
Apache ECharts
2.echart.js下载地址：https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js
一、具体使用ECharts
其实echart官方非常贴心，文档里面的使用手册写的很详细，在众多官方使用手册里，算的上是最容易让人理解，并能让小白最快速上手的官方说明了。
简单来说echarts所有的图表制作固定为三个步骤：
1.引入JS文件
<!-- 1.引入 ECharts 文件 -->
<script src="./echarts/echarts.min.js"></script>
2.准备HTML结构：一个盒子
<!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
3.JS初始化
不同的图表仅仅只是配置项和数据不同而已
注意：
官网CV过来声明变量用的是var，自行手动改成let或const，以及获取元素的方式也需要修改
真实项目中运用，找到项目里面对应装图表的盒子，更改一下3.1里面的dom元素
3.2 指定图表的配置项和数据需要替换，其他直接CV即可
CV注意检查Js引入的地址是否正确
以下是修改好的初始化内容：
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1.引入 ECharts 文件 -->
<script src="./echarts/echarts.min.js"></script>
</head><body>
<!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">// 3.1 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector('#main')); //加粗根据实际修改// 3.2 指定图表的配置项和数据
//以下内容=后面根据实际修改
let option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}// 3.3使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
</script>
</body></html>
二、官网找不到合适的图例怎么办？
官网没有去echarts社区找~
比如：地图就比较特殊，可以直接在社区找到
社区地址: series-map地图 - makeapie echarts图表可视化案例
自己平时做的比较有意思的图表也可以上传分享~
三、如何给饼图指示器的文字加颜色
关键步骤是以下两点：
const colorList = ['#00ffff', '#193140', '#ffff1f', '#00ff3e', '#ff005a']
data: data.map((item, index) => {
item.label = {
color: colorList[index]
};
return item;
}),
itemStyle: {
color: (params) => {
var index = params.dataIndex;
return colorList[index];
}
},
来个案例体会一下：
const colorList = ['#00ffff', '#193140', '#ffff1f', '#00ff3e', '#ff005a']
const data = [
{
'name': '爱电影',
'value': 1048,
}, {
'name': '爱生活',
'value': 735,
}, {
'name': '爱代码',
'value': 580,
}, {
'name': '爱美食',
'value': 484,
}, {
'name': '爱上网',
'value': 300,
},
]
// 指定图表的配置项和数据
const option = {
title: {
text: '文章分类数量比',
left: 'center',
top: 10
},
tooltip: {
trigger: 'item'
},
legend: {
top: '10%',
left: 'center'
},
series: [
{
name: '分类文章数量比',
type: 'pie',
radius: ['30%', '50%'],
color: ['#00ffff', '#193140', '#ffff1f', '#00ff3e', '#ff005a'],
data: data.map((item, index) => {
item.label = {
color: colorList[index]
};
return item;
}),
itemStyle: {
color: (params) => {
let index = params.dataIndex;
return colorList[index];
}
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
四、如何利用饼图做半圆渐变
关键步骤：
data: [
{
value: 25,
itemStyle: {
normal: {
color: '#04284d',
}
},
},
{
value: 50,
itemStyle: {
normal: {
color: '#ffffff',
}
},
},
{
value: 25,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00f8fc'
}, {
offset: 1,
color: '#006cd0'
}]),
}
},
},
]
结合案例体会一下~
option = {
series: [
{
type: 'pie',
radius: ['50%', '70%'],
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [
{
value: 25,
itemStyle: {
normal: {
color: '#04284d',
}
},
},
{
value: 50,
itemStyle: {
normal: {
color: '#ffffff',
}
},
},
{
value: 25,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00f8fc'
}, {
offset: 1,
color: '#006cd0'
}]),
}
},
},
]
}
]
};
五、双折线图如何改变x y轴的颜色和隐藏x轴的数据
关键步骤：
"axisLine": {
lineStyle: {
color: '#333'
}
},
"axisTick": {
"show": false
},
axisLabel: {
//数字几就代表 让x轴数据隔几个显示
interval: 1,
//修改坐标轴上的文字样式
textStyle: {
color: '#0190e9',
fontSize: 16
}
},
真实案例
option = {
backgroundColor: "#072b43",
color: ['#01dadb', '#df2519'],
title: {
text: '单位:万',
left: '5%',
top: '4%',
textStyle: {
color: '#0191e9',
fontSize: 24
}
},
tooltip: {
trigger: 'axis'
},
legend: {
x: 300,
top: '5%',
textStyle: {
color: '#333',
fontSize: 20
},
data: ['预期销售额', '实际销售额']
},
//以下作用：放大缩小
// grid: {
// left: '1%',
// right: '35%',
// top: '16%',
// bottom: '6%',
// containLabel: true
// },
xAxis: {
type: 'category',
//修改x轴线的样式
"axisLine": {
lineStyle: {
color: '#333'
}
},
"axisTick": {
"show": false
},
axisLabel: {
interval: 1,
textStyle: {
color: '#0190e9',
fontSize: 16
}
},
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: {
//修改y轴线的样式
"axisLine": {
lineStyle: {
color: '#333'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#0078d7',
}
},
"axisTick": {
"show": false
},
axisLabel: {
textStyle: {
color: '#0190e9',
fontSize: 16
}
},
type: 'value'
},
series: [
{
name: '实际销售额',
smooth: true,
type: 'line',
symbolSize: 14,
symbol: 'emptyCircle',
data: [50, 120, 90, 100, 70, 100, 110, 130, 80, 60, 160, 180]
},
{
name: '预期销售额',
smooth: true,
type: 'line',
symbolSize: 14,
symbol: 'emptyCircle',
data: [60, 150, 120, 130, 140, 130, 140, 150, 160, 100, 200, 230]
}
]
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
