echarts入门练习——零基础小白首次尝试

最新推荐文章于 2024-04-22 10:12:13 发布

weixin_44353999

最新推荐文章于 2024-04-22 10:12:13 发布

阅读量485

点赞数 1

分类专栏：前端文章标签： echarts javascript html5

本文链接：https://blog.csdn.net/weixin_44353999/article/details/120227180

版权

前端专栏收录该内容

6 篇文章 2 订阅

订阅专栏

本文是针对ECharts初学者的一份教程，详细介绍了如何从下载echarts.js文件到在HTML中引入并实现柱状图的步骤。强调了路径正确性的重要性，并建议学习术语速查手册和实践官网示例。示例代码展示了创建带有标记和平均值线的二层电路和三层电路柱状图。

摘要由CSDN通过智能技术生成

在练习echarts之前至少要知道它是什么：

Apache ECharts ———— 一个基于 JavaScript 的开源可视化图表库

【1】获取echarts.js文件：在https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。

【2】引入echarts.js文件：<script src="js/echarts.js"></script>

（引入echarts.js文件时一定一定一定【重要的事情说三遍】要注意路径，如果路径写的不对，将不起作用【我初次练习时就犯了这个错误】）

【3】建议和我一样零基础的小白，在初次练习时，仔细学习资源中术语速查手册中的内容。相信我，当你熟悉手册中的内容后，就不会再主观认为echarts难了。另外echarts官网中有很多示例，都可以直接拿来进行练习，写代码真的不能偷懒，还是得多敲才行。

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱状图</title>

    <script src="js/echarts.js"></script>
    <style type="text/css">
        *{
            box-sizing: border-box;
            margin: 0px;
            padding: 0px;
        }
        .zzt {
            width: 900px;
            background-color: rgb(253, 238, 238);
            margin: 100px auto;  
        }
        .title {
            font-size: 16px;
            font-weight: 600;
            height:42px;
            line-height:42px;
            color:#4B4B4B;
            border-radius:2px 2px 0 0;  
            padding:0 20px; 
        }
        #barchart {
            height: 260px;
            width: 100%;
        }
    </style>
    
</head>
    <body>
        <div class="container">
            <!--柱状图-->
            <div class="zzt">                
                    <div class="title">
                        图表数据
                    </div>
                    <div id="barchart"></div>                
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var chartDom = document.getElementById('barchart');
        var myChart = echarts.init(chartDom);
        var option;

option = {
    title: {
        text: '电路开通情况',
        left: "center",
        textStyle: {
                fontSize:'16',
                fontWeight: 'bold',
                color: '#1D1D1D', //标题的具体颜色 
                    }
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['二层电路', '三层电路'],
        left: "7%",
        top: "10%",
        itemWidth: 14, //小图标的宽度
        itemHeight: 8, //小图标的高度
        itemGap: 16,
        textStyle: {
                fontSize:'12',
                fontWeight: '400',
                color: '#4B4B4B', //字体颜色 
                    }       
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {show: true, readOnly: false}, 
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        },
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#CCCCCC',//左边线的颜色
                        width:'1'//坐标线的宽度
                    }
                },
            axisTick: {
                    show: false, //去掉x轴的刻度线
                },
            axisLabel: {
                    textStyle: {
                        fontSize:'12',
                        color: '#4B4B4B',//坐标值的具体颜色
 
                    }
                }
        }
    ],
    yAxis: [
        {
            type: 'value',
            min: 60,
            max: 210,
            interval: 30,
            splitLine: {
                    show: true, //y轴网格线
                    lineStyle: {
                    type:'dotted', //点状
                    color: '#CCCCCC',
                    opacity: '0.31', //透明度
                    }
                },
            axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#CCCCCC', //上边线的颜色
                        width:'1'//坐标线的宽度
                       
                    }
                },
            axisLabel: {
                    textStyle: {
                        fontSize:'12',
                        color: '#4B4B4B', //坐标值的具体颜色
                    }
                }
        }
    ],
    series: [
        {
            name: '二层电路',
            type: 'bar',
            barWidth:9, //柱状图的宽度
            color: '#E80000', //柱状图的颜色
            data: [85.0, 129.0, 129.0, 154.0, 128.0, 127.0, 187.0, 181.0, 128.0, 100.0, 129.0, 79.0],
            markPoint: {
                data: [
                    {name: '年最高', value: 187.0, xAxis: 6, yAxis: 187},
                    {name: '年最低', value: 79.0, xAxis: 11, yAxis: 79}
                ],
                symbolSize: 35, //表示最大最小值标记的大小
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ],
                symbol: ['none', 'triangle'], //表示平均值的线的左右两头的形状
                symbolSize: 7,
                lineStyle: {
                    type:'dotted', //点状线           
                    }
            },
        },
        {
            name: '三层电路',
            type: 'bar',
            barWidth:9, //柱状图的宽度
            color: '#4B4B4B', //柱状图的颜色
            data: [67.0, 119.0, 167.0, 154.0, 119.0, 119.0, 155.0, 142.0, 119.0, 100.0, 119.0, 75.0],
            markPoint: {
                data: [
                    {name: '年最高', value: 167.0, xAxis: 2, yAxis: 167},
                    {name: '年最低', value: 67.0, xAxis: 0, yAxis: 67}
                ],
                symbolSize: 35, //表示最大最小值标记的大小
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ],
                symbol: ['none', 'triangle'], //表示平均值的线的左右两头的形状
                symbolSize: 7,
                lineStyle: {
                    type:'dotted', //点状线              
                    }
            }
        }
    ]
};
option && myChart.setOption(option); //一定一定不可以漏掉
    </script>
</html>

请看效果图：

更多详情见echarts官网：https://echarts.apache.org/zh/index.html

weixin_44353999

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
echarts入门练习——零基础小白首次尝试

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>柱状.
复制链接

扫一扫