web数据可视化(Echarts版)2-13阶梯图(代码仅供参考)

白日梦想家☜

已于 2023-05-20 12:42:19 修改

阅读量336

点赞数

分类专栏： HTML 文章标签： echarts 信息可视化前端

于 2023-05-17 22:59:50 首次发布

本文链接：https://blog.csdn.net/m0_63471474/article/details/130736857

版权

HTML 专栏收录该内容

40 篇文章 12 订阅

订阅专栏

该代码示例展示了如何使用EChartsJavaScript库创建一个线图，描绘了2013年至2019年景区A、B和C的门票价格变化。图表包括分类轴（年份）和值轴（价格），并提供了tooltip、legend和toolbox功能。

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

echarts.js文件下载地址: Apache ECharts

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="echarts.js"></script>
    </head>>
    <body>
        <div id="main" style="width: 600px;height: 400px"></div>>
        <script type="text/javascript">
            var myChart=echarts.init(document.getElementById("main"));
            var option={
                title:{
                    text:"风景名胜区门票价格",
                    textStype:{
                        color:'green',
                    },
                    left:15,
                    top:0
                },
                tooltip:{
                    trigger:'axis'
                },
                legend:{
                    data:['景区A','景区B','景区C'],
                    left:260,
                    top:3
                },
                grid:{
                    left:'3%',
                    right:'4%',
                    bottom:'3%',
                    containLabel:true
                },
                toolbox:{
                    feature:{
                        saveAsImage:{}
                    }
                },
                xAxis:[
                    {
                        type:'category',
                        data:['2013年','2014年','2015年','2016年','2017年','2018年','2019年']
                    }
                ],
                yAxis:[
                    {
                        type:'value'
                    }
                ],
                series:[
                    {
                        name:'景区A',
                        type:'line',
                        step:'start',
                        data:[120,140,120,160,250,280,240]
                    },
                    {
                       
                        name:'景区B',
                        type:'line',
                        step:'middle',
                        data:[220,280,300,350,320,380,350]
            },
            {
                
                name:'景区C',
                        type:'line',
                        step:'end',
                        data:[400,480,540,450,580,750,650]
    }


        ]    
};
myChart.setOption(option);
</script>
</body>
</html>>