数据可视化echarts图表五部曲

最新推荐文章于 2024-07-20 00:15:28 发布

长岛山没有雪

最新推荐文章于 2024-07-20 00:15:28 发布

阅读量190

点赞数

文章标签： echarts 信息可视化 javascript 大数据

本文链接：https://blog.csdn.net/D32618666604/article/details/129975749

版权

<!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>Document</title>
 
    <!-- 步骤1、引入echarts.min.js文件 -->
    <script src="lib/echarts.min.js"></script>
</head>
<body>
    
    <!-- 
步骤1、引入echarts.min.js文件
步骤2、准备一个呈现图表的盒子
步骤3、初始化echarts实例对象
步骤4、准备配置项
步骤5、将配置项设置给echarts实例对象
     -->
 
     <!-- 步骤2、准备一个呈现图表的盒子 -->
<div id="main" style="border: 1px solid red;width: 900px;height: 600px;">
<script type="text/javaScript">
 
 
 var mychart= echarts.init(document.getElementById('main'));
 
 
 var option = {
    title:{
        // show:false,//去掉标题
        text:'我的第一个echarts图表',
        link:"https://echarts.apache.org/zh/option.html#title.link",
        //原图表关闭后打开一个新的页面
        target:'self',
        left:'center',
        // left:'20%',
        textStyle:{
            color:'red',
            fontSize:36         
        },
         // 在标题上加边框
         borderColor:'grey',
         borderWidth:5,
         borderRadius: 5, // 统一设置四个角的圆角大小
         borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）
 
        // textAlign:'auto'
    },
    
    toolbox:{  //工具栏
    feature:{
        saveAsImage:{
            title:'保存为图片'
        },
        restore: {
            title:'配置还原项'
        },
 
        magicType:{
            title:'动态类型切换',
            type:['line','bar']
        },
 
        dataZoom:{
            title:'区域缩放'
            // back:'缩放还原'
        }
    }
},
 
// 图例
// legend:{
//     left:'right',
//     top:'middle',
//     orient:'vertical',
//     data:['销售','金额']
// },
 
 
// 提示框 tooltip
tooltip:{
    trigger:'axis' ,//触发方式
    triggerOn:'mousemove|click'
    // formatter:function(params){
    //     return params.name
    // }
 
},
 
 
    xAxis: {
        type:'category',
        data:['Mon','Tue','Wed','Thu','Fir','Sat','Sun'] 
    },
    yAxis: {
        type:'value'
    },
 
series: [
    {
        data:[120,200,150,80,70,110,130],
        type:'bar',
        // 标记线，常用最大最小平均值
        markPoint: {
            data: [{
                name: '最大值',
                type: 'max',
                symbol: 'pin'
            },{
                name: '最小值',
                type: 'min',
                symbol:'pin'
 
            } ]
 
        },
        // 标记线，平均值
        markLine:{
            data:[{
                name: '平均值到最大值',
                type:'average'
            },{
                type:'max'
            },{
                type:'min'
            }
        ]
        },
 
        markArea:{
            data:[
                [{
                    name: '两个屏幕坐标之间的标域',
                    xAxis:'Tue'
                },{
                    xAxis:'Wed'
                } ],
                [
                    {
                        xAxis:'Fir'
                    },{
                        xAxis:'Sat'  
                    }
                ]
            ],
            
        }
 
    }]
};
mychart.setOption(option);
</script>
</div>
 
 
</body>
</html>

长岛山没有雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据可视化echarts图表五部曲

【代码】数据可视化echarts图表五部曲。
复制链接

扫一扫

数据可视化echarts图表五部曲

“相关推荐”对你有帮助么？