echarts的配置项

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.引入echatrs.min.js文件-->
    <script src="echarts.min.js"></script>
</head>
<body>
<!--2.准备一个装图表的盒子-->
<div style="width: 600px;height: 400px"></div>
<!--初始化echarts实例对象-->
<script>
  //3.初始化eharts实例对象
    var mcharts=echarts.init(document.querySelector('div'));
    //4.准备配置项
    var option={
        xAxis:{
            type:'category',//类目轴
            data:['xiaoming','xiaohong','xiaowang']
        },
        yAxis:{
           type:'value'//数值轴
        },
        series:[
            {
                name: '语文',
                type: 'bar',
                data: [70, 94, 110]
            }
        ]

    }
    //5.配置项给echarts对象
    mcharts.setOption(option);
</script>
</body>
</html>

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.引入echatrs.min.js文件-->
    <script src="echarts.min.js"></script>
</head>
<body>
<!--2.准备一个装图表的盒子-->
<div style="width: 600px;height: 400px"></div>
<!--初始化echarts实例对象-->
<script>
    //3.初始化eharts实例对象
    var mcharts=echarts.init(document.querySelector('div'));
    var xdata=['小明','小强','小孩','三客']
    var ydata= [70, 94, 110,55]
    //4.准备配置项
    var option={
        title:{
            text:'成绩展示',
            textStyle: {
                color:'blue',
            },
            borderWidth:5,
            borderColor:'red',
            borderRadius:5,
            left:20,
            top:10
        },
        tooltip:{
            trigger:'axis',
          //trigger:'item',
            triggerOn:'click',
            //formatter:'{b}的成绩是{c}',
            formatter:function (arg) {
               return arg[0].name+' '+arg[0].data
            }
        },
        toolbox:{
            feature: {
                saveAsImage: {},//导出图片
                dataView: {},//数据视图
                restore: {},//重置
                dataZoom: {},//区域缩放
                magicType:{

                }
            }

        },
        xAxis:{
            type:'category',//类目轴
            data:xdata
        },
        yAxis:{
           // type:'value'//数值轴
        },
        series:[
            {
                name: '语文',
                type: 'bar',
                markPoint:{
                  data:[
                      {
                          type: 'max',
                          name:'最大值'
                      },
                      {
                          type: 'min',
                          name:'最小值'
                      },
                  ]
                },
                markLine:{
                    data:[
                        {type:'average',name:'平均值'}
                    ]
                },
                label:{
                    show:true,
                },
                data: ydata

            }
        ]

    }
    //5.配置项给echarts对象
    mcharts.setOption(option);
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px"></div>
</body>
</html>
<script>
    var mcharts=echarts.init(document.querySelector('div'));
    var xdata=['小明','小强','小孩','三客']
    var ydata1= [70, 94, 110,55]
    var ydata2= [50, 74, 120,88]
    var option={
        title:{
            text:'成绩展示',
            textStyle: {
                color:'blue',
            },
            borderWidth:5,
            borderColor:'red',
            borderRadius:5,
            left:20,
            top:10
        },
        legend:{
          data:['数学','语文']
        },
        tooltip:{
            trigger:'axis',
            //trigger:'item',
            triggerOn:'click',
            //formatter:'{b}的成绩是{c}',
            formatter:function (arg) {
                return arg[0].name+' '+arg[0].data
            }
        },
        toolbox:{
            feature: {
                saveAsImage: {},//导出图片
                dataView: {},//数据视图
                restore: {},//重置
                dataZoom: {},//区域缩放
            }
        },
        xAxis:{
            type:'category',//类目轴
            data:xdata
        },
        yAxis:{
            type:'value'//数值轴
        },
        series:[
            {
                name: '语文',
                type: 'bar',
                label:{
                    show:true,
                },
                data: ydata1

            },
            {
                name: '数学',
                type: 'bar',
                label:{
                    show:true,
                },
                data: ydata2

            },
        ]

    }
    //5.配置项给echarts对象
    mcharts.setOption(option);
</script>

 

posted @ 2021-01-23 10:13  好吗，好  阅读(74)  评论(0)    收藏  举报