介绍
近来面试的时候，hr发一个文档过来，先把这个笔试完成，我们再约面试吧。
好家伙，还要先搞个笔试。
打开文档一看，原来是要用echarts实现一个半圆环效果图
近来没怎么用echarts，都忘记了，看到效果图，一开始还不知道怎么做。
没关系，马上去echarts官网看下文档，看下要怎么实现这个效果
实现
到官网示例查看一下，当看到环形图的时候，这不就是我们想要的，立马点进去，代码复制粘贴一气呵成。
步骤一
先下载echarts，创建一个html文件，引入echarts
<script src="./js/echarts.min.js"></script>
在body里创建一个div标签，echarts绘制时，要用这个div作为容器
<div id="main"></div>
接着创建一个script标签，把在示例里复制的代码，粘贴到这里
<script>
import * as echarts from "echarts"
var chartDom = document.getElementById("main")
var myChart = echarts.init(chartDom)
var option
option = {
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "center",
},
// series 渲染的图表，可以配置多个
series: [
{
name: "Access From",
// type:每个图标类型， pie，圆环
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
// 鼠标悬浮高亮显示
emphasis: {
label: {
show: true,
fontSize: "40",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
// data,配置每项数据
data: [
// value：控制百分比
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" },
],
},
],
}
option && myChart.setOption(option)
</script>
官网示例用的是模块化导入，我们这里是在html文件写的，不是在模块化里写的，所以修改一下
去掉import 这一行代码就好了,上面script标签已经引入echarts了
import * as echarts from "echarts"
运行html文件，打开浏览器一看，啥也没有？？
浏览器一片空白，控制台也没有报错，有问题
检查一下dom元素，发现没有高度，是不是没有高度导致的。先给容器添加宽高看下
#main {
width: 500px;
height: 500px;
}
刷新一看，圆环图出来了
步骤二
基本的圆环出来了，接下来基于这个圆环进行修改
我们看下代码里的option（echarts的配置项）
我们看到radius属性，中文翻译为半径。去官网查了一下，这是控制圆环的内外半径的。
第一个元素控制内半径，第二个元素控制外半径
radius: ["40%", "70%"],
圆环宽度太宽了，修改一下外半径
radius: ["40%", "55%"],
再往下看，看到data属性，这应该是设置数据项的。
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" },
]
5个元素，刚好对应圆环的5个部分。那我们就可以在这里配置数据项。
再看下我们要实现的效果图
看起来是一个半圆，但是我们是不是可以理解为它就是一个圆，分为3个部分，上左，上右和下半圆。
好，先去掉data里的两个元素
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
],
我们再去官方文档查看一下，只简单说了 value 是 数据值。竟然没有详细解释。
只好去网上查一下资料，明白了，每项元素的value值加一起就是一个整圆，用自己value值除以总值，就代表了该元素在圆环里占据的百分比
比如元素一 value值为1048， 1048 / （1048+735+580） = 0.44350
就代表元素一在圆环里的百分比为 44.35%
再回到我们要实现的效果图，分为三部分，左半圆（25%），右半圆（25%），下半圆（50%）
按照百分比设置data里的元素的value值
data: [
{ value: 100, name: "Search Engine" },
{ value: 100, name: "Direct" },
{ value: 200, name: "Email" },
],
效果出来了，但是是左右结构。没关系，去官网看下文档。
看到有一个startAngle属性，控制圆环的起始角度。默认为90°
我们添加这个属性，设置为180°看下什么效果
startAngle: 180,
刚好是我们想要的效果
修改一下颜色，查阅官方文档，可以通过itemStyle属性来修改颜色
color 可以支持十六进制 或 rgb,rgba
data: [
{
value: 100,
name: "Search Engine",
itemStyle: {
color: "rgba(0, 255, 229, 1)",
},
},
{
value: 100,
name: "Direct",
itemStyle: {
color: "rgba(0, 255, 229, 0.1)",
},
},
{ value: 200, name: "Email" },
],
再修改一下容器的背景颜色
#main {
width: 500px;
height: 500px;
background-color: #080330;
}
但是下半圆还在，没关系，css样式里有一个透明属性- transparent，我们给第三个元素设置看下
{
value: 200,
name: "Email",
itemStyle: {
color: "transparent",
},
},
好的，基本达到我们想要的效果。但是还少了一个文字 50%。
查阅官方文档发现，option的 title属性可以控制标题文字
title: {
text: "50%",
left: "center",
top: "43%",
textStyle: {
fontSize: 40,
color: "rgba(57, 193, 91, 1)",
},
},
好的，整体差不多了，还差一点小效果，带点光晕效果怎么做？
css可以利用blur 做辉光效果，到官方文档里看一下，看到有一个shadowBlur属性，先加上去看下效果
{
value: 100,
name: "Search Engine",
itemStyle: {
color: "rgba(0, 255, 229, 1)",
shadowBlur: 30,
},
},
加了好像没有效果 到官方文档一看，shadowBlur需要配合shadowColor使用，设置模糊的颜色
{
value: 100,
name: "Search Engine",
itemStyle: {
color: "rgba(0, 255, 229, 1)",
shadowBlur: 40,
shadowColor: "rgba(0, 255, 229, 1)",
},
},
终于完成了
总结
1.先去官网示例找到相似的示例
2.拷贝示例代码过来，按照自己的效果图进行修改
3.遇到不知道的属性，到官方文档查阅一下
4.最总要的一点，画一个效果图的时候，如果官方示例里没有对应的图形，思考一下这个效果图要怎么做，是否可以用示例里的图形进行拆分，最终完成效果图
