【2019-03-20】echartsjs初体验

定义

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts官网

关键字：ECharts，跨平台，兼容性好，数据可视化图表

初体验

因工作需要，需要在前端展示数据为折线图，问了一下同事，ECharts符合需求。

模板

实际项目：Pug+vue.js+style

pug

#tel_echart(style="width: 98%;height:400px;")
script(src='/vendor/echarts.min.js')

js

var tel_echart = echarts.init(document.getElementById('tel_echart'))
tel_echart.setOption(get_tel_option(data))

function get_tel_option(data) {
    var option = {
        grid: {
            bottom: '25%',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
        },
        xAxis: [
            {
                type: 'category',
                data: [],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    show: true,
                    interval: 0,
                    margin: 10,
                    formatter: function (params) {
                        var p = params.split('~')
                        return `${p[0]}~\n${p[1]}`
                    }
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value} %'
                },
            }
        ],
        series: [
            {
                name: '每周手机号码占比',
                type: 'line',
                data: [],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        formatter: '{c0}%'
                    },
                },
            }
        ]
    }
    data.map(d => {
        var x = `${d.start_time}~${d.end_time}`
        var y = Math.round((d.tel_user * 100 / d.total) * 100) / 100
        option.xAxis[0].data.push(x)
        option.series[0].data.push(y)
    })
    if (data.length > 7) {
        option.xAxis[0].axisLabel.rotate = (data.length - 7) * 10
        if (option.xAxis[0].axisLabel.rotate > 90) {
            option.xAxis[0].axisLabel.rotate = 90
        }
    }
    return option
}