Web常用图（Echarts）

下面的程序来源于

Echarts开源社区：https://www.makeapie.com/explore.html#sort=ranktimeframe~timeframe=all~author=all

Echarts官网：https://echarts.apache.org/examples/zh/index.html

 

我将下面的echarts图封装在了一个js文件中，放在了git上，有兴趣的可以下载（文件名Drawing.js）：地址：https://github.com/MasonYyp/vue_file

1 折线图

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line',
        symbol: 'triangle',
        symbolSize: 20,
        lineStyle: {
            color: '#5470C6',
            width: 4,
            type: 'dashed'
        },
        itemStyle: {
            borderWidth: 3,
            borderColor: '#EE6666',
            color: 'yellow'
        }
    }]
};

 

2 条形图

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        itemStyle: {
            normal: {
                color: function(params) {
                    let colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622']; 
                    return colorList[params.dataIndex % colorList.length];
                }
            }
        }
    }]
};

 

3 柱状图

var xData = ["2020-01", "2020-02", "2020-03", "2020-04", "2020-05", "2020-06"]
var line = ["1030", "205", "84","568","689","4587"];

option = {
    xAxis: [{
        data: xData,
        axisLabel: {
            textStyle: {
                fontSize:14
            },
            margin: 30
        },

        axisLine: {
            show: false //不显示x轴
        },
        axisTick: {
            show: false //不显示刻度
        }
    }],
    yAxis: {
        type: 'value'
    },
    series: [
        {//柱底圆片
            name: "",
            type: "pictorialBar",
            symbolSize: [60, 22],
            symbolOffset: [0, 10],
            z: 12,
            label: {
                normal: {
                    show: true,
                    position: "top",
                    fontSize: 20,
                    fontWeight: 'bold',
                    color: '#909399'
                }
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "rgba(89,211,255,1)"
                        },
                        {
                            offset: 1,
                            color: "rgba(23,237,194,1)"
                        }
                    ])
                }
            },
            data: line
        }, 
        
        //柱体
        {
            name: '',
            type: 'bar',
            barWidth: 60,
            barGap: '0%',
            itemStyle: {
                normal: {
                    color: {
                        x: 0, y: 0, x2: 0, y2: 1,
                        type: "linear",
                        global: false,
                        colorStops: [{
                            offset: 0,
                            color: "rgba(0,255,245,0.5)"
                        }, {
                            offset: 1,
                            color: "#43bafe"
                        }]
                    }
                }
            },
            data: line
        }, 
        
        //柱顶圆片
        {
            name: "",
            type: "pictorialBar",
            symbolSize: [60, 22],//调整截面形状
            symbolOffset: [0, -10],
            z: 12,
            symbolPosition: "end",
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0,0,0,1, [{
                            offset: 0,
                            color: "rgba(89,211,255,1)"
                        }, {
                            offset: 1,
                            color: "rgba(23,237,194,1)"
                        }],
                        false
                    )
                }
            },
            data: line
        }
    ]
};

 

4 饼状图

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    // legend: {
    //     orient: 'vertical',
    //     left: 'left',
    // },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            selectedOffset: 20,
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

 

5 玫瑰图

option = {
    title: {
        text: '666',
        left: 'center',
        top: '49%',
        textStyle: {
            fontSize: 16,
            color: '#3C4353',
            fontStyle: 'normal',
            fontWeight: '400',
            fontFamily: 'PingFangSC-Regular,PingFang SC;',
        }
    },
    color: ['#7eacea', '#e15777', '#95ea71', '#ea9b4f', '#7577df', '#be72d8', '#fff'],
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [{
        name: '统计',
        type: 'pie',
        radius: [30, 110],
        center: ['50%', '50%'],
        roseType: 'radius',
        label: {
            show: true,
            formatter: '{d}%',
        },
        emphasis: {
            label: {
                show: true
            }
        },
        data: [{
                value: 25,
                name: 'rose1'
            },
            {
                value: 20,
                name: 'rose2'
            },
            {
                value: 15,
                name: 'rose3'
            },
            {
                value: 10,
                name: 'rose4'
            },
            {
                value: 8,
                name: 'rose5'
            },
            {
                value: 3,
                name: 'rose6'
            },
        ]
    }, {
        name: '占位',
        type: 'pie',
        silent: true,
        center: ['50%', '50%'],
        radius: 30,
        hoverAnimation: false,
        label: {
            show: false,
            position: 'center'
        },
        data: [{
                value: 1,
                name: '占位2'
            },

        ],
        itemStyle: {

            normal: {
                color: '#fff',
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10,
            },
        }
    }, ]
};

 

6 雷达图

option = {
    backgroundColor: 'rgba(0,0,0,.5)',
    legend: {
        top: '0%',
        right: '2%',
        orient: 'vertical',
        textStyle: {  color: '#fff', fontSize: 22, }, 
        data: ['2019评分', '2020评分'],
        icon: 'roundRect',
    },
    radar: {
        radius: '60%',
        center: ['50%', '52%'],
        startAngle: 0,
        triggerEvent: true,
        name: {  textStyle: { color: '#fff', fontSize: '20', borderRadius: 3, padding: [20, 5] } },
        nameGap: '2',
        indicator: [
            { name: '服务态度', max: 6500 },
            { name: '办事时间', max: 16000 },
            { name: '跑动次数', max: 30000 },
            { name: '缴费方式', max: 38000 },
        ],
        splitArea: {
            areaStyle: {
                color: [ 'rgba(0,255,255, 0.1)', 'rgba(0,255,255, 0.2)', 'rgba(0,255,255, 0.3)', 'rgba(0,255,255, 0.4)', 'rgba(0,255,255, 0.5)', 'rgba(0,255,255, 0.6)', ].reverse(),
                shadowColor: 'rgba(0, 0, 0, 1)',
                shadowBlur: 30,
                shadowOffsetX: 10,
                shadowOffsetY: 10
            }
        },
        axisLine: {  lineStyle: { color: 'rgba(0,206,209, 0.3)' } },
        splitLine: {
            lineStyle: {
                width: 1,
                color: [ 'rgba(0,206,209, 0.1)', 'rgba(0,206,209, 0.2)', 'rgba(0,206,209, 0.3)', 'rgba(0,206,209, 0.4)', 'rgba(0,206,209, 0.5)', 'rgba(0,206,209, 0.6)' ].reverse() 
            }
        }
    },
    series: [{
        name: '2019评分',
        type: 'radar',
        areaStyle: { color: 'rgba(127,255,210, 0.5)' },
        symbol: 'circle',
        symbolSize: 12,
        itemStyle: { color: 'rgba(127,255,210,0.8)', borderColor: 'rgba(127,255,210,0.2)', borderWidth: 10, },
        lineStyle: { color: 'rgba(127,255,210, 0.6)', width: 2 },
        label: { show: false, },
        data: [ [4600, 13000, 25000, 23500, 25000] ]
    },
    {
        name: '2020评分',
        type: 'radar',
        areaStyle: { color: 'rgba(255,237,145, 0.5)' },
        symbol: 'circle',
        symbolSize: 12,
        itemStyle: { color: 'rgba(255,237,145,0.8)', borderColor: 'rgba(255,237,145,0.2)', borderWidth: 10, },
        lineStyle: { color: 'rgba(255,237,145, 0.6)', width: 2 },
        data: [ [5300, 15000, 12800, 13500, 15000] ]
    }
]
};

 

7 知识图谱

let dataRel=[
                {
                name: '实体',
                draggable: false, // 是否可以拖拽，默认false
                category: 0, // 这是种类，运维1测试2应用3实施4开发5
                number: 0, // 这是编号 非必须，目的仅为方便编写line
                value: [300, 45], //图形大小
                symbolSize: 80,
                showNum: 25 //节点需要显示的额外内容
            }, {
                name: '环境因子',
                number: 1,
                category: 1,
                draggable: true,
                value: 40,
                showNum: 35
            }, {
                name: '物质',
                number: 2,
                category: 1,
                draggable: true,
                value: 45,
                showNum: 35
            }, {
                name: '生物',
                number: 3,
                category: 1,
                draggable: true,
                value: 45,
                showNum: 35
            }, {
                name: '浮游生物',
                number: 4,
                category: 1,
                draggable: false,
                value: [300, 100],
                 symbolSize: 80,
                showNum: 35
            }, {
                name: '浮游植物',
                number: 5,
                category: 3,
                draggable: true,
                value: 45,
                showNum: 35
            }, {
                name: '浮游动物',
                number: 6,
                category: 3,
                draggable: true,
                value: 45,
                showNum: 35
            }, {
                name: '原生生物',
                number: 7,
                category: 2,
                draggable: true,
                value: 45,
                showNum: 35
            }, {
                name: '细菌',
                number: 8,
                category: 2,
                draggable: true,
                value: 45,
                showNum: 35
            }, {
                name: '灾害事件',
                number: 9,
                category: 1,
                draggable: true,
                value: 45,
                showNum: 35
            }, {
                name: '赤潮',
                number: 10,
                category: 2,
                draggable: true,
                value: 45,
                showNum: 35
            }, {
                name: '水母灾害',
                number: 11,
                category: 2,
                draggable: true,
                value: 35,
                showNum: 35
            }]
let dataLink= [
                {
                source: 0, // 可以用name 可以用number，但name不能重名
                target: 1,
                value: '一级'
            }, {
                source: 0, // 可以用name 可以用number，但name不能重名
                target: 2,
                value: '一级'
            }, {
                source: 0, // 可以用name 可以用number，但name不能重名
                target: 3,
                value: '一级'
            }, {
                source: 0, // 可以用name 可以用number，但name不能重名
                target: 9,
                value: '一级'
            }, {
                source: 3, // 可以用name 可以用number，但name不能重名
                target: 4,
                value: '二级-生物'
            }, {
                source: 3, // 可以用name 可以用number，但name不能重名
                target: 7,
                value: '二级-生物'
            }, {
                source: 3, // 可以用name 可以用number，但name不能重名
                target: 8,
                value: '二级-生物'
            }, {
                source: 4, // 可以用name 可以用number，但name不能重名
                target: 5,
                value: '三级-灾害事件'
            }, {
                source: 4, // 可以用name 可以用number，但name不能重名
                target: 6,
                value: '三级-灾害事件'
            }, {
                source: 9, // 可以用name 可以用number，但name不能重名
                target: 10,
                value: '二级-灾害事件'
            }, {
                source: 9, // 可以用name 可以用number，但name不能重名
                target: 11,
                value: '二级-灾害事件'
            }, ]
option = {
    title: {
        text: '实体关系网络'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    legend: {
        x: "center",
        show: true,
        data: [] // 此处不显示根节点学生
    },
    series: [

        {
            type: 'graph',
            layout: 'force',
            symbolSize: function(size) {
                return size;
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 10
                    },
                    formatter: "{c}"
                }
            },
            force: {
                repulsion: 2500,
                edgeLength: [10, 50]
            },
            focusNodeAdjacency: true,
            roam: true,
            categories: [{
                name: '用户',
            }, {
                name: '话题',
            }, {
                name: '测试',
                // itemStyle: { 可配置颜色
                //     normal: {
                //         color: "blue",
                //     }
                // }
            }, {
                name: '应用',
            }, {
                name: '实施',
            }, {
                name: '开发',
            }],
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 12
                    },
                }
            },
            force: {
                repulsion: 1000
            },
            tooltip: {
                formatter: function(node) { // 区分连线和节点，节点上额外显示其他数字
                    if (!node.value) {
                        return node.data.name;
                    } else {
                        return node.data.name + ":" + node.data.showNum;
                    }
                },
            },
            lineStyle: {
                normal: {
                    opacity: 0.9,
                    width: 1,
                    curveness: 0.3
                }
            },
            data: dataRel,
            links:dataLink
        }
    ]
};