Echarts 采坑笔记

标题颜色属性修改

 title: {
     text: '平均耗时（分钟）',
     textStyle: {
        color: 'red'
     }
 }

背景颜色的设置

var option={
    backgroundColor:'rgba(128, 128, 128, 0.1)' //rgba设置透明度0.1
}

设置grid 绘图位置

grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
},

修改x轴和y轴的颜色

xAxis: {
    type: 'category',
    // 左右留空
    boundaryGap: true,
    //设置轴线的属性
    axisLine:{
        lineStyle:{
            color:'#f80',
            width:8,
        }
    },
    // x数据都显示
    axisLabel:{interval: 0},
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},

yAxis : [
    {
        type : 'value',
        //设置轴线的属性
        axisLine:{
            lineStyle:{
                color:'#00FF00',
                width:8,//这里是为了突出显示加上的
            }
        } 
    }
]

x轴文字倾斜

xAxis : [
    {
        type : 'category',
        data : xAxisData,
        axisLabel: {  
           interval:0,  // 分割数据
           rotate:40,
           align:"center", // 文字居中
           color:"#f90" // 颜色
        }  
    }
],

设置legend 标签切换

title:{
    text:'成绩分析'
},
legend: {
    data:['数据1'，'数据2'],
    itemWidth: 20,
    itemHeight: 10,
    itemGap: 10,
    right: '4%',
    icon: 'rect',
    textStyle: {
        fontSize: 12,
        color: '#F1F1F3'
    }
},

设置 series 内容

series : [
    {
        name:'平均成绩',
        type:'line',
        data:[95,121,122,123,197,190,186],
        label:{normal: {show: true,position: 'top'}},
        itemStyle:{normal: {color: '#5574fa'}} // 控制线的颜色、线上显示label
    }
]

折线图条的颜色修改

yAxis : [
    {
        type : 'value',
        axisLine:{
            lineStyle:{
                color:'#828282',
                width:1
            }
        },
        splitLine : {
            show:true,
            lineStyle:{
                color:'#e8ecf6'
            }
        },
        axisTick:{
            show:false
        }
    }
]

设置放大缩小Zoom功能

// 模拟数据
var base = +new Date(2018, 9, 3);
var oneDay = 24 * 3600 * 1000;
var xdate = [];
var ydata = [Math.random() * 300];
for (var i = 1; i < 2000; i++) {
    var now = new Date(base += oneDay);
    xdate.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
    ydata.push(Math.round((Math.random() - 0.5) * 20 + ydata[i - 1]));
}
var xAxisData = xAxisData ||  xdate;
var yAxisData = yAxisData ||  ydata;

var allCharts = document.getElementById(container);
allCharts.innerHTML = "";
var ele = document.createElement("div");
ele.id = eleId;
ele.style.width = "100%";
ele.style.height = "250px";
allCharts.appendChild(ele);
window.setTimeout(function(){
    var dom = document.getElementById(eleId);
        var myChart = echarts.init(dom);
        var option = {
            xAxis: {
                type: 'category',
                boundaryGap: true,
                data: xAxisData
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            dataZoom: [
                 {   
                     id: 'xdataZoom',
                     type: 'slider',//图表下方的伸缩条
                     show : true,  //是否显示
                     realtime : true,  //
                     start : 0,  //伸缩条开始位置（1-100），可以随时更改
                     end : 100,  //伸缩条结束位置（1-100），可以随时更改
                },
                {   
                     id: 'ydataZoom',
                     type: 'inside',  //鼠标滚轮
                     realtime : true
                }
            ],
            grid:{
                width:'90%',
                height:'75%',
                left:'5%',
                bottom:'80px'
            },
            series: [{
                name:'one',
                type:'bar',
                smooth:true,
                itemStyle:{normal: {color:lineColor}},
                data: yAxisData
            }]
        }
        // 初始化
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
},500);

移动端适配不同的手机屏幕

window.onresize = function () {
    myChart1.resize();
}