1.Echarts的简单使用

1 下载echarts.min.js

2 使用示例

3 其他参数

4 echarts社区

4.1 找社区

4.2 找想要的效果

4.3 移植到自己的项目上

4.3.1 方法一

4.3.2 方法二

4.4 调试样式

Echarts是做前端数据可视化的，数据可视化是将数据做成图表，常见的可视化库有D3.js，ECharts.js,Highchart.js,AntV等

ECharts官网地址 Apache ECharts

进入后点击所有示例

示例中有各种图像

1 下载echarts.min.js

有很多种下载方式，只要最后能下载到echarts.min.js就行

打开后ctrl+s保存

2 使用示例

之后找到想要的示例，然后点击

点击下载示例

下载后会得到一个html文件

将这里引用echarts.min.js改为本地

如果用上面的方式无法下载echarts.min.js，用浏览器直接访问这个链接然后保存也可以下载echarts.min.js

如果样式上没有调整的话，填入你需要的数据就行了

3 其他参数

除此之外还有很多参数，常用的参数大类有下面这些

title 标题组件
tooltip 提示框组件
legend 图例组件
toolbox 工具栏
grid 直角坐标系内绘图网格
xAxis 直角坐标系grid中的x轴
yAxis 直角坐标系grid中的y轴
serise 图标类型
color 调色盘颜色列表

这个用的时候去官网查手册就行

4 echarts社区

4.1 找社区

上面都是官方的示例，只靠官方自己开发的东西有时不能满足我们的所有需求，这个时候我们只能找其他开发者创作的东西，以前在官网中有社区->Gallery

这里面有很多非官方创作者创造的东西

现在这个gallery在官网中没有了，你可以简单搜索一下，得到一些替代品

比如 echarts图表集

4.2 找想要的效果

用法与Echarts官方差不多，比如我看这个水球的效果感觉很好，我就点它

打开之后是这样的，左边是代码，右边是效果

首先要先看Echarts的版本，你去任何一个网站，他应该都会告诉你echarts的版本是什么，我这里给提示了，是4.1.0

他可以支持的版本有很多，在这里可以选，选择后可以看效果，如果与自己项目的版本不一致需要考虑一下

4.3 移植到自己的项目上

下面这两种方法实际上殊途同归，最后结果一样，但过程有所不同

4.3.1 方法一

按F12，看一下人家这个水球都引入什么了

发现右侧的图表本质上是一个iframe，里面引入了4个JS

我们可以发现引入了4个JS

echarts-liquidfill.min.js
jquery.min.js
main.js
echarts.min.js

除了 echarts-liquidfill.min.js 其余的三个都可以通过右键src的链接搞到

echarts-liquidfill.min.js可以在这里面搞到

之后我们看一下这段代码，发现代码的目的是改动option这个变量

这个option我们是很熟悉的，他就是echarts图表的配置项

我们现在随便下载一个官方示例，替换掉官方示例的option，并引入我们之前看到的4个JS文件

main.js很明显它不是一个库的名字，推测是页面左侧的代码，所以我不引入
jQuery.js也先不引入，如果有问题它后面会告诉我，少$符号这种东西

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
</body>
<script src="./4.1.0_echarts.min.js"></script>
<script src="./echarts-liquidfill.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});
var app = {};

var option;

const series = [
    {
        type: 'liquidFill',
        shape: 'circle',
        radius: '80%',
        center: ['50%', '50%'],
        data: [0.6, 0.5, 0.4],
        // 球体配置
        outline: {
            borderDistance: 0,
            itemStyle: {
                borderWidth: 2,
                borderColor: '#3dfff6',
                shadowBlur: 20,
                shadowColor: '#12786f'
            }
        },
        color: ['rgba(50, 255, 238, .6)', 'rgba(154, 255, 247, .6)'],
        backgroundStyle: {
            color: 'transparent',
        },

        label: {
            show: true,
            textStyle: {
                color: '#12786f',
                insideColor: '#12786f',
                fontSize: 28
            }
        },
        label: {
            show: true,
            textStyle: {
                color: '#12786f',
                insideColor: '#12786f',
                fontSize: 40
            },
            formatter: params => {
                return `${(params.value * 100).toFixed(0)}%\n {a|百分比}`
            },
            rich:{
                a: {
                    fontSize: 24,
                }
            }
        }
    },
]

option = { series,backgroundColor: 'rgba(0, 0, 0, 0.8)' }

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);
</script>
</html>

这个时候效果已经出来了

4.3.2 方法二

直接拿这里的iframe，iframe其实不算好拿的，如果只有个div这样的就能好拿

下面演示一下怎么拿

对网页使用ctrl+s保存网页

发现除了一个html之外还有一个文件夹

iframe一定是一个html文件，我们搜索一下，发现有一个editer.html

打开之后发现就是之前看到的iframe(之前你是知道内容的)

把这个html复制出来，然后格式化该页代码

之后再简单搞一下

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%; -webkit-tap-highlight-color: transparent; user-select: none;"_echarts_instance_="ec_1675405420806">
        <div
            style="position: relative; overflow: hidden; width: 744px; height: 458px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
            <canvas data-zr-dom-id="zr_0" width="930" height="572"
                style="position: absolute; left: 0px; top: 0px; width: 744px; height: 458px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
        </div>
    </div>
</body>
<script id="echartsjs" src="../../4.1.0_echarts.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="../../echarts-liquidfill.min.js"></script>
<script id="codejs" type="text/javascript">
    dom = document.getElementById("container");
    myChart = echarts.init(dom);
    app = {};


    const series = [
        {
            type: 'liquidFill',
            shape: 'circle',
            radius: '80%',
            center: ['50%', '50%'],
            data: [0.6, 0.5, 0.4],
            // 球体配置
            outline: {
                borderDistance: 0,
                itemStyle: {
                    borderWidth: 2,
                    borderColor: '#3dfff6',
                    shadowBlur: 20,
                    shadowColor: '#12786f'
                }
            },
            color: ['rgba(50, 255, 238, .6)', 'rgba(154, 255, 247, .6)'],
            backgroundStyle: {
                color: 'transparent',
            },

            label: {
                show: true,
                textStyle: {
                    color: '#12786f',
                    insideColor: '#12786f',
                    fontSize: 28
                }
            },
            label: {
                show: true,
                textStyle: {
                    color: '#12786f',
                    insideColor: '#12786f',
                    fontSize: 40
                },
                formatter: params => {
                    return `${(params.value * 100).toFixed(0)}%\n {a|百分比}`
                },
                rich: {
                    a: {
                        fontSize: 24,
                    }
                }
            }
        },
    ]

    option = { series, backgroundColor: 'rgba(0, 0, 0, 0.8)' }

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
</script>
</html>

4.4 调试样式

如果先调样式然后应用，发现并不能在自己的项目中应用，是比较费时间的

调试样式只需要对option进行修改了，看文档比较麻烦，我们一般直接看变量来蒙

开源的东西他本质上是想让你用，所以在用法上他不会搞得特别晦涩

比如上面这个circle就是圆形，我们可以尝试使用rectangle看它会不会变成一个矩形，修改之后点击播放发现可以变成矩形

这里大致猜一猜应该是百分比的值，对应右侧的三个波浪

我们可以给他都加20%看看，发现可以适用