ECharts（基础模板详解）

全栈开发日记

发布于 2022-05-13 14:23:52

9870

文章被收录于专栏：全栈开发日记全栈开发日记

ECharts是什么

当你学会了ECharts，你就可以做这个⬇⬇⬇

http://mpvideo.qpic.cn/0bf2kuhnmaaorqaf6fe7rbpv4vod2zkq5vqa.f10002.mp4?

视频来自官网

或者简单点的⬇⬇⬇ http://mpvideo.qpic.cn/0bf2fih5eaapgyaf5yu6tbpv6kwd2iva7uqa.f10002.mp4?

官方网址：

https://echarts.apache.org/

官方配置项手册：

https://echarts.apache.org/zh/option.html#title

基础模板

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="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: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

需要注意：

在模板中导入的js插件是静态的，也就是说你的本地需要有对应路径的js资源。

模板详解

这里只讲解JavaScript部分。

初始化

var myChart = echarts.init(document.getElementById('main'));

init在很多框架以及代码中都是初始化的意思，所以不难理解这个初始化方法。

它的参数是选中一个给定宽高的div。

初始化方法需要使用变量接收，因为需要这个返回值来打开经过配置的图表。

配置图表属性

var option = {

添加配置属性，图表长什么样子由它里面的配置决定。

配置项

如上图所示的都属于配置项，即图表中的配置内容，冒号后的就是你配置的参数了。

你可能会发现，为什么有的冒号后面是 “[{” ，有的是 “{” ？

当你的图表中有多个相同的配置项时，就需要使用中括号把花括号括起来，表示为同一个配置项。

这里举一个例子：

（其他代码还是上面的）

title: [{
    text: 'ECharts 入门示例'
},{
    text:'标题二'
}]

图表是这样的：

执行上面代码后

为什么是重叠的？因为两个配置项的默认位置是同一位置，需要通过属性 top 和 left 来设置他们的位置。

标题加入定位后

title: [{
    text: 'ECharts 入门示例'
},{
    text:'标题二',
    left:170
}],

这里设置了left值为170，即该标题与左边框的距离

执行上述代码后图表

如何学习配置项

通过官方配置项手册，很直观的看到所有ECherts的配置项。

点击查看大图

框中的这些都是配置项，点开之后它们有下级配置项，它们的下级配置项也很可能还有下级配置项。

总之通过这个手册可以很直观的找到你要控制的配置项，上手相对容易。

好了，今天就到这了，有问题后台留言，下次见。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-10-23，如有侵权请联系 cloudcommunity@tencent.com 删除

https

http

编程算法

网络安全

本文分享自全栈开发日记微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度