【前端知识】-echart

最新推荐文章于 2024-05-04 20:46:30 发布

伯阳Martin

最新推荐文章于 2024-05-04 20:46:30 发布

阅读量795

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_45449154/article/details/108443762

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、echart具体能做些啥？
二、快速学习
- 1.柱状图 --重点看懂option 里面属性
- 2.饼图 --相对于柱状图option会简单一些
总结

前言

提示：这是一篇echart入门文章，提供给比较迷茫的前端新手，快速看会文档，上手写项目；欢迎大家提出宝贵意见，一起成长！—一些基本echart介绍和引入就不多说了网上有大量的资源，这里讲大家最关心的如何最快上手写带有echart的项目

提示：以下是本篇文章正文内容，下面案例可供参考

一、echart具体能做些啥？

常见图例：折线图、柱状图、饼图、散点、地图。。。

二、快速学习

1.柱状图 --重点看懂option 里面属性

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入echart图表 -->
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
    <title>echart</title>
</head>

<body>
    <div id="main" style="width: 600px; height: 400px;"></div>
    <script>
        var myechart = echarts.init(document.getElementById('main'));

        //柱状图 
        var option = {
            // 标题
            title: {
                text: '这是配置标题'
            },
             axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
            // 提示信息
            tooltip: {},
            // 图例组件
            legend: {
                data: [{
                    name: '系列1',
                    // 强制设置图形为圆
                    icon: 'circle',
                    // 设置文本为红色
                    textStyle: {
                        color: 'red',
                    },
                },
                {
                    name: '系列2',
                    // 强制设置图形为圆
                    icon: 'circle',
                    // 设置文本为红色
                    textStyle: {
                        color: 'yellow'
                    }
                },
                ]
            },
            // X轴
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子','ying']
            },
            yAxis: {
                type:'value'
            },
            // 系列列表
            series: [
                {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
       
            ]
        };
        
        // option = {
          
        // };


        myechart.setOption(option);
    </script>
</body>

</html>

2.饼图 --相对于柱状图option会简单一些

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入echart图表 -->
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
    <title>echart</title>
</head>
<body>
    <div id="main" style="width: 600px; height: 400px;"></div>
    <script>
       var myechart = echarts.init(document.getElementById('main'),'');
        var option = {
            series : [
                {
                    name:'访问来源',
                    type:'pie', //设置图表类型为图
                    radius:'78%', // 饼图的半径，外半径为可视区域尺寸 (容器高度中较小-项)的55%长度。
                    data:[  // 数据数组，name为数据项名称，value为数据项值
                        {value:235,name:'视频广告'},
                        {value:274,name:'联盟广澳'},
                        {value:200,name:'广告'},
                        {value:335,name:'视频'},
                        {value:400,name:'邮件广告'},
                        {value:100,name:'张林峰'},
                        {value:100,name:'张林'},
                    ],
                    roseType:'angle',
                    itemStyle: {
                        normal:{
                            shadowBlur:200,
                            shadowColor:'rgba(0,0,0,0.5)'
                        }
                    }
                }
            ]
        }

        myechart.setOption(option);
    </script>
</body>
</html>

该处使用的url网络请求的数据。

## 这是两种最常见的图。了解这两个典型的图之后可以完成一些基本的图形操作结合折线图和柱状图做一些难度高些多种图形结合的demo 就差不多和实际项目图形差不多其他请多看实例

总结

看实例快速掌握基本图形写法，参照实例了解更多，没有比较把文档一章一章看完，拿最需要的就行

伯阳Martin

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
【前端知识】-echart

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、echart具体能做些啥？二、快速学习1.柱状图 --重点看懂option 里面属性2.饼图 --相对于柱状图option会简单一些总结前言提示：这是一篇echart入门文章，提供给比较迷茫的前端新手，快速看会文档，上手写项目；欢迎大家提出宝贵意见，一起成长！—一些基本echart介绍和引入就不多说了网上有大量的资源，这里讲大家最关心的如何最快上手写带有echart的项目提示：以下是本篇文章正文内容，下面案
复制链接

扫一扫