Echarts学习笔记

最新推荐文章于 2023-03-07 15:58:41 发布

smallworldxyl

最新推荐文章于 2023-03-07 15:58:41 发布

阅读量87

点赞数

分类专栏：可视化文章标签： echarts

本文链接：https://blog.csdn.net/smallworldxyl/article/details/113941023

版权

可视化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.快速上手

步骤：
1.引入echarts.min.js文件（从官网下载解压缩可得到，放到js文件同级目录）
2.准备一个呈现图表盒子
3.初始化一个echarts实例对象
4.准备配置项
5.将配置项设置给echarts实例对象

<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 1. 引入 echarts.js -->
    <!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
    <script src="echarts.min.js"></script>
</head>
<body>
<!--2. 为ECharts准备一个具备大小（宽高）的Dom容器 -->
<div id="main" style="width: 1000px;height:600px;"></div>

<script type="text/javascript">
    // 3.基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    //4.准备配置项
    var option={
        backgroundColor: '#2c343c',
        textStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                data:[
                    {value:400, name:'搜索引擎'},
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:274, name:'联盟广告'},
                    {value:235, name:'视频广告'}
                ],
                roseType: 'angle',

                itemStyle: {
                    emphasis: {
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    normal: {
                        textStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        }
                    }
                }

            }
        ]
    }


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

</script>
</body>
</html>

效果：
在这里插入图片描述

二.配置项

官方地址：https://echarts.apache.org/zh/index.html

1.柱状图

option = {
	//x轴
    xAxis: {
        type: 'category',//x轴类型
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']//x轴数据
    },
    //y轴
    yAxis: {
    //此处为value代表是数值，具体会根据下面的series来设置
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

在这里插入图片描述

smallworldxyl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts学习笔记

一.快速上手步骤：1.引入echarts.min.js文件（从官网下载解压缩可得到，放到js文件同级目录）2.准备一个呈现图表盒子3.初始化一个echarts实例对象4.准备配置项5.将配置项设置给echarts实例对象<html><head> <meta charset="utf-8"> <title>ECharts</title>  &
复制链接

扫一扫

专栏目录