Echarts 图表开发四大步骤详解

最新推荐文章于 2024-05-22 23:29:43 发布

Nick Peng

最新推荐文章于 2024-05-22 23:29:43 发布

阅读量2.7k

点赞数 3

分类专栏： Echarts 文章标签： Echarts图表开发四大步数据可视化

本文链接：https://blog.csdn.net/PY0312/article/details/104447960

版权

Echarts 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

文章目录

一、引入Echarts
二、初始化Echarts实例
三、准备展示数据Data
四、设定图表配置项Option
五、图表展示最终效果
六、完整实例代码及解析

好文章 记得收藏+点赞+关注额！！！

---- Nick.Peng

一、引入Echarts

引入 Echarts.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.js"></script>
</head>
<body>
</body>
</html>

二、初始化Echarts实例

在 body 中给Echarts指定 Dom 的大小
初始化一个 Echarts 实例，如下

<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'));
    </script>
</body>

三、准备展示数据Data

<script type="text/javascript">
        ......
        
        // 准备图表展示数据
        var data_name = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        var data_num = [5, 20, 36, 10, 10, 20]
</script>

四、设定图表配置项Option

对图表option进行配置
使用初始化的echarts实例myChart按指定的配置项和数据显示图表

<script type="text/javascript">
		......
		
        // 对图表option进行配置
        var option = {
            // 图表标题
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            // 图例
            legend: {
                data:['销量']
            },
            xAxis: {
                data: data_name
            },
            yAxis: {},
            series: [{
                // 柱状图
                type: 'bar',
                data: data_num,
                // 显示标签数量
                label: {
                    normal: {
                        show: true,
                        position: 'top'     // 显示位置
                    }
                },
                //配置样式
                itemStyle: {
                    //通常情况下样式
                    normal:{
                        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                        color: function (params){
                            var colorList = ['#8dc63f','#add8e6','#ffb6c1','#f37b1d','#A6A6D2','#F0E68C'];
                            return colorList[params.dataIndex];
                        }
                    },
                    //鼠标悬停时，显示强调效果
                    emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
            },
            // 折线图
            {
                name: '销量',
                type: 'line',
                data: data_num,
                smooth: true
            }],
        };

        // 使用刚初始化的echarts实例myChart按指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>

五、图表展示最终效果

在这里插入图片描述

六、完整实例代码及解析

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.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 data_name = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        var data_num = [5, 20, 36, 10, 10, 20]

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例' // 图表标题
            },
            tooltip: {},
            legend: {
                data:['销量']       // 图例
            },
            xAxis: {
                data: data_name     // x轴数据
            },
            yAxis: {},              // y轴默认自动
            series: [{
                // 柱状图
                type: 'bar',
                data: data_num,
                // 显示标签数量
                label: {
                    normal: {
                        show: true,
                        position: 'top'     // 显示位置
                    }
                },
                //配置样式
                itemStyle: {
                    //通常情况下样式
                    normal:{
                        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                        color: function (params){
                            var colorList = ['#8dc63f','#add8e6','#ffb6c1','#f37b1d','#A6A6D2','#F0E68C'];
                            return colorList[params.dataIndex];
                        }
                    },
                    //鼠标悬停时，显示强调效果
                    emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
            },
            // 折线图
            {
                name: '销量',
                type: 'line',
                data: data_num,
                smooth: true
            }],
        };

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

完结。。。

Nick Peng

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
Echarts 图表开发四大步骤详解

文章目录一、引入Echarts二、初始化Echarts实例三、准备展示数据Data四、设定图表配置项Option五、图表展示最终效果六、完整实例代码及解析好文章记得收藏+点赞+关注额！！！---- Nick.Peng一、引入Echarts引入 Echarts.js<!DOCTYPE html><html><head> <met...
复制链接

扫一扫

专栏目录