ECharts 自学笔记 | 基本配置项的使用

最新推荐文章于 2024-06-13 11:24:43 发布

SoI_

最新推荐文章于 2024-06-13 11:24:43 发布

阅读量42

点赞数

文章标签： echarts 笔记

本文链接：https://blog.csdn.net/m0_74062159/article/details/130855175

版权

<!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>
    
</head>
<body>
    <script src="./echarts.min.js"></script>

    <div id = 'main' style="width: 500px;height: 600px;"></div>


    <script>
        
        var myChart = echarts.init(document.getElementById('main'));
        var xDataArr = ['zhang','li','wang','run','xiao','mao'];
        var yDataArrMath =  ['90','100','86','80','76','95']; 
        var yDataArrChina =  ['80','100','66','80','86','75'];


        var option = {

// --------------title配置--------
            title: {
                //文字样式
                 text: '柱状图',
                 textStyle:{
                 color:'black',
                 fontSize:'20px'
                },
                //标题边框
                borderWidth:5,
                borderColor:'green',
                borderRadius:5, 
                //标题位置
                left:20,
                top:10,
                

            },





// ----------tooltip------------
            tooltip: {
                //默认开关位true
                // show:true ,
                // trigger:'axis'、'item'
                trigger: 'item',

                //triggerOn何时触发:mousemove、click
                triggerOn:'mousemove',

                // formatter: String、function
                // formatter:'{b}的成绩是{c}'
                formatter:function(arg){
                    console.log(arg)
                    return arg.name+'的成绩是：'+arg.data;
                }
            },

//-----------------toolbox----
            toolbox:{
                feature:{
                    //保存为图片选项
                    saveAsImage:{},
                    //数据视图
                    dataView:{},//支持临时修改数据
                    // 重置功能
                    restore:{},
                    // 区域缩放
                    dataZoom:{},
                    // 动态图表类型切换
                    magicType:{
                        type:['bar','line','pie']
                    }
 
                }
            },


//------------------legend(需和series配合使用--筛选)----------
                legend:{
                    data:['语文','数学']//数组内容对应series中的几个对象的name
                },







            xAxis : {
                data : xDataArr,
                type : 'category'
            },
            yAxis :{
                type:'value'
            },





            series :[{
                type:'bar',
                name :'语文',
                data : yDataArrMath,
                color:'yellowgreen',
                //柱的宽度
                barWidth:'30%',
                //每条住的属性
                label:{
                    show:true,
                    rotate:15,
                    position:'inside',
                    color:'orange',
                    fontSize:'20px'
                },
              
            },
            {
                type:'bar',
                name :'数学',
                data : yDataArrChina,
                color:'darkgreen',
                //柱的宽度
                barWidth:'30%',
                //每条住的属性
                label:{
                    show:true,
                    rotate:15,
                    position:'inside',
                    color:'orange',
                    fontSize:'20px'
                },
              
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>