ECharts学习-柱状图

最新推荐文章于 2024-05-10 21:07:48 发布

小溪彼岸

最新推荐文章于 2024-05-10 21:07:48 发布

阅读量5.5k

点赞数

分类专栏： # HTML 文章标签： ECharts 柱状图 javascript

本文链接：https://blog.csdn.net/zww1984774346/article/details/51489458

版权

HTML 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

按照官方文档写了一个柱状图的例子。

第一种方式使用网络js:

主要代码如下：

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById("main"));
    var option={
        tooltip:{
            show:true
        },
        legend:{
            data:["销量"]
        },
        xAxis:[{
            type:'category',//默认为类目
            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        }],
        yAxis : [
            {
                type : 'value'//默认为值类型
            }
        ],
        series : [
            {
                "name":"销量",
                "type":"bar",
                "data":[5, 20, 40, 10, 10, 20]
            }
        ]

    };
    // 为echarts对象加载数据
    myChart.setOption(option);

</script>
</body>

在option内设置图表的类型和相关参数：

tooltip:{
            show:true
        }

设置是否显示工具栏目
这里写图片描述

legend:{
            data:["销量"]
        }

设置表述数据和图形的关联描述
这里写图片描述

       xAxis:[{
            type:'category',//默认为类目
            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        }],
        yAxis : [
            {
                type : 'value'//默认为值类型
            }
        ]

xAxis，yAxis分别为x轴和y轴的值和类型,x轴类型默认为‘category’和y轴类型默认为‘value’。

 series : [
            {
                "name":"销量",
                "type":"bar",
                "data":[5, 20, 40, 10, 10, 20]
            }
        ]

series为数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据，设置内容为工具条显示的具体内容。

总体效果图：
这里写图片描述

第二种方式使用本地js:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px;width: 400px"></div>
<!-- ECharts单文件引入 -->
<script src="../Vendor/echarts/build/dist/echarts-all.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById("main"));
    var option={
        tooltip:{
            show:true
        },
        legend:{
            data:["销量"]
        },
        xAxis:[{
            type:'category',//默认为类目
            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        }],
        yAxis : [
            {
                type : 'value'//默认为值类型
            }
        ],
        series : [
            {
                "name":"销量",
                "type":"bar",
                "data":[5, 20, 40, 10, 10, 20]
            }
        ]

    };
    // 为echarts对象加载数据
    myChart.setOption(option);

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

小溪彼岸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
ECharts学习-柱状图

按照官方文档写了一个柱状图的例子。第一种方式使用网络js:主要代码如下：<body><div id="main" style="height:400px"></div><script src="http://echarts.baidu.com/build/dist/echarts-al
复制链接

扫一扫