Echarts在线免费图表

 
            let axisData = [2018, 2019, 2020];

let data = [1,2,1], data2 = [2,1,2], data3 = [8,7,6], data4 = [13,8,7]

let links = data.map( (item, i) => {
    return {
        source: i,
        target: i + 1
    };
});
// color
const color = ['#12c3c4', '#e6a92f', '#039ef3', '#ff3593']

// 背景图
// const symbolImg1 = require('@/assets/echart-icon/circle1.png');
// const symbolImg2 = require('@/assets/echart-icon/circle2.png');
// const symbolImg3 = require('@/assets/echart-icon/circle3.png');
// const symbolImg4 = require('@/assets/echart-icon/circle4.png');

// xAxis
const xAxis = [{
    type : 'category',
    data : [],
    axisLine: { lineStyle: { color:'rgba(0,0,0,.2)' }},
    axisLabel: { textStyle: {color:'hotpink' }}
},{
    type : 'category',
    // 数据
    data : axisData,
    // 轴刻度
    axisTick: false,
    // 轴配置
    axisLine: { lineStyle: { color:'rgba(0,0,0,0)' }},
    // 轴文字配置
    axisLabel: { textStyle: { color:'hotpink', fontSize: '100%' }}
}]

// yAxis
const yAxis = [{
    type : 'value',
    // 坐标轴名称
    name: '排名',
    // 坐标轴样式
    nameTextStyle:{ color: 'hotpink', algin: 'center', fontSize: '100%', padding:[0,30,0,0]},
    // 是否开启翻转轴
    inverse: true,
    // 轴最大刻度值
    maxInterval: 2,
    // 轴内配置
    splitLine: { lineStyle: { type: 'solid',color: 'rgba(0, 0, 0, .1)' }, show: true },
    // 轴配置
    axisLine: { lineStyle: { color:'rgba(0,0,0,.2)' }},
    // 轴文字配置
    axisLabel: { textStyle: { color:'hotpink', fontSize: '100%' }},
},{
    name: '年份',
    nameTextStyle:{ color: 'hotpink', algin: 'center', fontSize: '100%', verticalAlign: 'middle' },
    splitLine: false,
    axisTick: false,
    axisLine: false,
    axisLabel: { textStyle: { color:'hotpink', fontSize: '100%' }}
}]

// series
const series =  [
    {
        type: 'graph',
        layout: 'none',
        coordinateSystem: 'cartesian2d',
        // 自定义图片
        // symbol:'image://' + symbolImg2,
        symbolSize: 50,
        // 文字显示
        label: { 
            show: true,
            formatter: params => { 
                // 如果是最后一个,数字后面拼上城市，否则显示数字即可
                if(params.dataIndex === data.length -1) {
                    return `{a|${params.value}}{b|深圳市}`
                } else { return params.value }
            },
            // 文字样式
            rich: {
                a: { padding:[0,0,0,100], align: 'center', color: '#fff' },
                b: { color:color[0], fontSize: '100%', align:'right', width: 100, fontWeight: 100, padding:[12,0,0,0] },
            }
        },
        // 关系轴样式
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        data: data,
        links: links,
        lineStyle: { color: color[0] }
    },
    {
        type: 'graph',
        layout: 'none',
        coordinateSystem: 'cartesian2d',
        // symbol:'image://' + symbolImg1,
        symbolSize: 50,
        label: { 
            show: true,
            formatter: params => { 
                if(params.dataIndex === data.length -1) {
                    return `{a|${params.value}}{b|广州市}`
                } else { return params.value }
            },
            rich: {
                a: { padding:[0,0,0,100], align: 'center', color: '#fff' },
                b: { color:color[1], fontSize: '100%', align:'right', width: 100, fontWeight: 100, padding:[0,0,10,0] },
            }
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        data: data2,
        links: links,
        lineStyle: { color: color[1] }
    },
    {
        type: 'graph',
        layout: 'none',
        coordinateSystem: 'cartesian2d',
        // symbol:'image://' + symbolImg3,
        symbolSize: 50,
        label: { 
            show: true,
            formatter: params => { 
                if(params.dataIndex === data.length -1) {
                    return `{a|${params.value}}{b|武汉市}`
                } else { return params.value }
            },
            rich: {
                a: { padding:[0,0,0,100], align: 'center', color: '#fff' },
                b: { color:color[2], fontSize: '100%', align:'right', width: 100, fontWeight: 100, padding:[12,0,0,0] },
            }
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        data: data3,
        links: links,
        lineStyle: { color: color[2] }
    },
    {
        type: 'graph',
        layout: 'none',
        coordinateSystem: 'cartesian2d',
        // symbol:'image://' + symbolImg4,
        symbolSize: 50,
        label: { 
            show: true,
            formatter: params => { 
                if(params.dataIndex === data.length -1) {
                    return `{a|${params.value}}{b|东莞市}`
                } else { return params.value }
            },
            rich: {
                a: { padding:[0,0,0,100], align: 'center', color: '#fff' },
                b: { color:color[3], fontSize: '100%', align:'right', width: 100, fontWeight: 100, padding:[0,0,10,0] },
            }
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        data: data4,
        links: links,
        lineStyle: { color: color[3] }
    },
]
option = { xAxis, yAxis, series, color }