echarts学习笔记总结2

1 

2 把轴反过来

2 动态显示数据

代码:

// 初始化图表
var myChart=null;
function  initChart(dataTime,dataValue) {
    if(!myChart){
        myChart=echarts.init(document.getElementById('line'));
    }
    var option={
        tooltip: {
            trigger: 'axis'
        },
        xAxis:[
            {
                type:'category',
                data:dataTime,  // 传递进来的数据
                name:'时间'
            }
        ],
        yAxis:[
            {
                type:'value',
                name:'误差'
            }
        ],
        series:[
            {
                type:'line',
                data:dataValue,    // 传递进来的数据
                name:'误差'
            }
        ]
    };
    myChart.setOption(option);
}

总结: 那些数据是动态变化的，就作为参数传递进来

3 对tooltip进行格式化显示

代码:

tooltip: {
    trigger: 'axis',
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    },
    formatter:function (params) {
        console.log(params);
        // return params[0].data.assessType==9?0:params[0].data.assessErr;
        var assessErr=params[0].data.assessType==9?0:params[0].data.assessErr;
        var name=params[0].name;
        var color=params[0].color;  // 获取颜色
        // 小圆点的制作
        var marker=`<span style="
            display:inline-block;
            margin-right:5px;
            border-radius:10px;
            width:10px;
            height:10px;
            background-color:${color};">
        </span>`;
        return '台体:'+name+'<br>'+marker+'误差:'+assessErr;
    }
},

效果:

4 图表跟着窗口大小的改变而改变

也可以用js实现:

window.onresize = myChart.resize;    // $(window).resize(myChart.resize); 都可以

5 设置x轴、y轴的长度