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%看看,发现可以适用


版权声明:本文为potato123232原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>