echarts 学习资料

<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts标题'
        },
      tooltip: {                                  // 气泡提示配置
            trigger: 'item',                        // 触发类型，默认数据触发，可选为：'axis'
            triggerOn:"mousemove",                      //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
            showContent:true,                           //是否显示提示框浮层
            alwaysShowContent:true,                     //是否永远显示提示框内容
            showDelay:0,                                  //浮层显示的延迟，单位为 ms
            hideDelay:0,                                //浮层隐藏的延迟，单位为 ms
            enterable:false,                             //鼠标是否可进入提示框浮层中
            confine:false,                               //是否将 tooltip 框限制在图表的区域内
            transitionDuration:0.4,                      //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
            // position:['50%', '50%'],                    //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
            // formatter:"{b0}: {c0}<br />{b1}: {c1}",     //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
            // backgroundColor:"transparent",            //标题背景色
            // borderColor:"#ccc",                        //边框颜色
            // borderWidth:0,                              //边框线宽
            // padding:5,                                  //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
            // textStyle:mytextStyle,                     //文本样式
        },
      legend: {         //图例
            data: [{
                name: '降水量',//要与下面series中name对应
                icon: 'circle',//'image://../asset/ico/favicon.png',//标志图形类型，
                // 默认自动选择（8种类型循环使用，不显示标志图形可设为'none'），
                // 默认循环选择类型有：'circle（圆点）' | 'rectangle（矩形）' | 'triangle（三角）' |
                // 'diamond（四边形）' |'emptyCircle（圆形里面内容为空）' | 'emptyRectangle（矩形里面内容为空）' |
                // 'emptyTriangle（三角形里面内容为空）' | 'emptyDiamond（四边形里面内容为空）'  /'arrow'（箭头）
                textStyle: {fontWeight: 'bold', color: 'green'}  //写在data里的文字颜色比写在data外权重高
            }],
            show: true,//图例为显示还是隐藏
            orient: 'horizontal', // 'vertical'
            x: 'right', // 'center' | 'left' | {number},
            y: 'top', // 'center' | 'bottom' | {number}
            backgroundColor: '#fff',//图例的背景色
            // borderColor: 'green',
            // borderWidth: 4,
            // padding: 10,
            // itemGap: 20,
            textStyle: {color: 'red'},
            selected: {
                '降水量': true,//false开始的图表为隐藏，true为显示
            },
        },
        xAxis: {
            show:true,                //是否显示 x 轴
            gridIndex:0,              //x 轴所在的 grid 的索引，默认位于第一个 grid
            position:"bottom",       //x 轴的位置。"top"，"bottom"，默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧
            offset:0,                 //X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
            type:"category",         //坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
            // 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据
            name:'时间',               //坐标轴名称
            nameLocation:"end",       //坐标轴名称显示位置。可选：'start','middle','end'
            // nameTextStyle:mytextStyle,  //坐标轴名称的文字样式
            nameGap:15,                  //坐标轴名称与轴线之间的距离
            nameRotate:0,                //坐标轴名字旋转，角度值
            inverse:false,              //是否是反向坐标轴
            boundaryGap:true,           //类目轴中 boundaryGap 可以配置为 true 和 false。非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效['20%', '20%']
            min:null,                    //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数
            max:null,                   //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。不设置时会自动计算最大值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数
            scale:false,                //只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。
            splitNumber:5,             //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整
            minInterval:0,             //自动计算的坐标轴最小间隔大小,例如可以设置成1保证坐标轴分割刻度显示成整数。只在数值轴中（type: 'value'）有效。
            logBase:10,                 //对数轴的底数，只在对数轴中（type: 'log'）有效
            silent:false,              //坐标轴是否是静态无法交互
            triggerEvent:false,       //坐标轴的标签是否响应和触发鼠标事件
            axisLine:{                 //坐标 轴线
                show:true,             //是否显示坐标轴轴线
                onZero:true,           //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
                // lineStyle:mylineStyle
            },
            axisTick :{                 //坐标轴刻度相关设置
                show:true,              //是否显示坐标轴刻度。
                alignWithLabel:false,  //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
                // interval:auto,          //坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
                inside:false,           //坐标轴刻度是否朝内，默认朝外。
                length:5,                //坐标轴刻度的长度。
                // lineStyle:mylineStyle
            },
            axisLabel:{                 //坐标轴刻度标签的相关设置
                show:true,              //是否显示
                interval:"auto",        //坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
                inside:false,           //刻度标签是否朝内，默认朝外
                rotate:0,               //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度
                margin:8,               //刻度标签与轴线之间的距离
                formatter: function (value, index) {            //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
                    return value+"kg";
                },
                showMinLabel:null,      //是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label）
                showMaxLabel:null,      //是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最大 tick 的 label）
                // textStyle:mytextStyle
            },
            splitLine:{                 //坐标轴在 grid 区域中的分隔线。
                show:true,              //是否显示分隔线。默认数值轴显示，类目轴不显示。
                interval:"auto",        //坐标轴分隔线的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：
                // lineStyle:mylineStyle
            },
            splitArea:{                 //坐标轴在 grid 区域中的分隔区域，默认不显示。
                interval:"auto",
                show:false,             //是否显示分隔区域
                // areaStyle:myareaStyle
            },
            zlevel:0,                   //X 轴所有图形的 zlevel 值。
            z:0,                        //X 轴组件的所有图形的z值
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},//与 xAxis一样
       series: [{
            name: '降水量',
            type: 'bar',//bar 柱状图，line  折线图， scatter 散点图， pie 饼图
            data: [5, 20, 36, 10, 10, 20],
            // hoverAnimation:false,
            // center: ['50%', '65%'],
            // radius: ['60%', '70%'],
            // labelLine: {
            //     normal: {
            //         show: false
            //     }
            // }
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
--------------------- 
作者：大马侯 
原文：https://blog.csdn.net/fxs12138/article/details/83473916