Echarts在线免费图表

 
            var legen = ['环境温度', '地温', '环境湿度', '土壤湿度']

var seriesDatas = [
    [10, 42, 11, 44, 10, 20, 10, 20, 12, 11, 34, 40],
    [40, 42, 11, 44, 10, 20, 10, 20, 12, 11, 34, 40],
    [30, 42, 11, 44, 10, 20, 10, 20, 12, 11, 34, 40],
    [20, 42, 11, 44, 10, 20, 10, 20, 12, 11, 34, 40]
]

var seriesData = []
var serData=[]
for (var i = 0; i < legen.length; i++) {
    var item = {
        name:legen[i],
        type: 'line',
        smooth: true,
        data: seriesDatas[i]
    }
    serData.push(item)
}
seriesData=serData

var option = {
    color: [
        '#ff6666', '#6699FF', '#40e0d0', '#C1232B', '#B5C334',
        '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63',
        '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579',
        '#F4E001', '#F0805A', '#26C0C0'
    ],
    title: {
        text: '历史记录',
        textStyle: {
            fontSize: 28,
            color: '#333'
        },
        top: '2%',
        left: '1%'
    },
    tooltip: {
        trigger: 'axis' // 触发类型:坐标轴触发
    },
    legend: { // 图例组件
        type: '',
        data:legen,
        icon: 'line', // 图例项的 icon
        itemWidth: 24, // 图例标记的图形宽度
        itemHeight: 3, // 图例标记的图形高度
        right: '1%',
        top: '2%',
        orient: 'vertical', // 图例列表的布局朝向
        height: 150,
        //selected: this.selected,
        textStyle: {
            fontSize: 12,
            color: '#333'
        }
    },
    grid: { // 直角坐标系内绘图网格
        left: '3%',
        right: '18%',
        bottom: '3%',
        containLabel: true // grid 区域是否包含坐标轴的刻度标签
    },
    xAxis: {
        type: 'category',
        boundaryGap: ['20%', '20%'], // 两边留白
        data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00']
    },
    yAxis: [{
        type: 'value',
        name: '',
        splitNumber: 10, // 分割段数
        boundaryGap: ['20%', '20%'],
        axisLabel: {
            formatter: '{value}'
        }
    }],
    series:seriesData
}

// 图例选中 添加数据
myChart.on('legendselectchanged', function(params) {
    var selected = params.selected
    var legend = params.name
    console.log(selected)
    console.log(legend)
    if (selected[legend] === true) {}
})
myChart.setOption(option)