介绍

基于 echarts 封装的图表常用组件

安装教程

1. npm i data-echarts
2. import line from 'data-echarts'
3. Vue.use(line)

传参示例

折线图

data: {
    grid: {
        top: 50,
        left: 10,
        right: 10,
        bottom: 5,
        containLabel: true
    },
    legend: {
        show: false
    },
    xAxisName: {
        name: '小时',
        nameLocation: 'start',
        nameTextStyle: {
            fontSize: 14,
            color: '#fff',
            padding: 8,
            align: 'center',
            verticalAlign: 'top'
        }
    },
    yAxisName: {
        name: 'yName',
        nameTextStyle: {
            fontSize: 14,
            color: '#fff',
            align: 'left',
            padding: [-10, 0, 0, -10],
            verticalAlign: 'top'
        }
    },
    data: [
        {
            name: '用电',
            color: '#75F2C2',
            xData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            yData: [123, 4, 6, 1, 13, 1, 1, 313]
        },
        {
            name: '用水',
            color: '#FF9921',
            xData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            yData: [165, 16, 1, 16, 16, 16, 1, 13, 1, 1]
        }
    ]
}

柱状图

data: {
    grid: {
        top: 50,
        left: 10,
        right: 10,
        bottom: 5,
        containLabel: true
    },
    legend: {
        show: false
    },
    xAxisName: {
        name: '小时',
        nameLocation: 'start',
        nameTextStyle: {
            fontSize: 14,
            color: '#fff',
            padding: 8,
            align: 'center',
            verticalAlign: 'top'
        }
    },
    yAxisName: {
        name: 'yName',
        nameTextStyle: {
            fontSize: 14,
            color: '#fff',
            align: 'left',
            padding: [-10, 0, 0, -10],
            verticalAlign: 'top'
        }
    },
    data: [
        {
            name: '用电',
            color: '#75F2C2',
            xData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            yData: [123, 4, 6, 1, 13, 1, 1, 313]
        },
        {
            name: '用水',
            color: '#FF9921',
            xData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            yData: [165, 16, 1, 16, 16, 16, 1, 13, 1, 1]
        }
    ]
}

环形图

data: [
    { value: 1048, name: '离线', color: '#3CA7FF' },
    { value: 735, name: '告警', color: '#75F2C2' },
    { value: 580, name: '故障', color: '#FE952E' },
    { value: 484, name: '维修', color: '#fff' }
]