echarts 关系流向图带框

最新推荐文章于 2024-07-23 11:23:48 发布
最新推荐文章于 2024-07-23 11:23:48 发布
阅读量687 收藏 8
点赞数 13
分类专栏： echarts 文章标签： echarts 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46263815/article/details/135641219
版权
1：坐标定位画一个框区分流向效果

在这里插入图片描述

     let dataLists = [
                {
                    name: '111',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [240, 0],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '222',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [105, 50],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '333',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [105, 110],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                { name: "444", symbol: "", value: [105, 180], symbolSize: [10, 10] },
                { name: "555", symbol: "", value: [40, 180], symbolSize: [10, 10] },
                { name: "666", symbol: "", value: [170, 180], symbolSize: [10, 10] },


                {
                    name: '888',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [40, 330],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },

                {
                    name: '777',
                    deviceType: "ZONGHE",
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [40, 230],
                    x: 200,

                    y: 500,

                    fixed: true,

                    category: 1,

                    itemStyle: {

                        normal: {

                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [

                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '999',
                    deviceType: "CAIJI",
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [170, 230],
                    x: 170,
                    y: 230,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {

                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [

                                {

                                    offset: 0,

                                    color: '#ffb402',

                                },

                                {

                                    offset: 1,

                                    color: '#ffdc84',

                                },

                            ]),

                        },

                    },
                },
                { name: "1010", symbol: "", value: [170, 270], symbolSize: [10, 10] },
                { name: "1111", symbol: "", value: [110, 270], symbolSize: [10, 10] },
                { name: "1212", symbol: "", value: [230, 270], symbolSize: [10, 10] },
                {
                    name: '13',
                    deviceType: "YINGYONG",
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [110, 330],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '14',
                    deviceType: "YINGYONG",
                    symbol: "",
                    symbolSize: [30, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [230, 330],
                    x: 220,
                    y: 330,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '15',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [500, 50],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '16',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [500, 110],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '17',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [750, 240],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '18',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [335, 290],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '19',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [415, 290],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '20',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [495, 290],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '21',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [575, 290],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '22',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [660, 290],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '23',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [335, 210],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '24',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [415, 210],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '25',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [495, 210],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '26',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [575, 210],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
                    name: '27',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [660, 210],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                { name: "xxxxx1111", symbol: "", value: [0, 350], label: { color: '#53B5EA', position: 'top', }, symbolSize: [1, 0] },
                { name: "rectangle1", symbol: "", value: [250, 350], symbolSize: [0, 0] },
                { name: "rectangle2", symbol: "", value: [250, 20], symbolSize: [0, 0] },
                { name: "rectangle3", symbol: "", value: [0, 20], symbolSize: [0, 0] },

                { name: "xxxxxx222", symbol: "", value: [280, 350], symbolSize: [0, 0] },
                { name: "rectangle4", symbol: "", value: [800, 350], symbolSize: [0, 0] },
                { name: "rectangle5", symbol: "", value: [800, 20], symbolSize: [0, 0] },
                { name: "rectangle6", symbol: "", value: [280, 20], symbolSize: [0, 0] },

                { name: "数据采集节点", symbol: "", value: [300, 330], label: { color: '#53B5EA', position: 'top', }, symbolSize: [0, 0] },
                { name: "rectangle7", symbol: "", value: [720, 330], symbolSize: [0, 0] },
                { name: "rectangle8", symbol: "", value: [720, 160], symbolSize: [0, 0] },
                { name: "rectangle9", symbol: "", value: [300, 160], symbolSize: [0, 0] },
            ];
			//	线指向设置
            let linkesList = [
                {
                    source: '111',
                    target: '333',
                    // deviceType: "YINGYONG",
                    lineStyle: {
                        normal: {
                            color: '#53B5EA',
                            // color: 'red',
                        },
                    },
                },
                {
                    source: '222',
                    target: '333',
                    deviceType: "YINGYONG",
                    lineStyle: {

                        normal: {
                            color: '#53B5EA',
                            // color: 'red',
                        },
                    },
                },
                {
                    source: '333',
                    target: '444',
                    deviceType: "YINGYONG",
                    lineStyle: {
                        normal: {
                            color: '#53B5EA',
                            // color: 'red',
                        },
                    },
                },
                {
                    source: '444',
                    target: '555',
                    deviceType: "CAIJI",
                    lineStyle: {
                        normal: {
                            color: '#53B5EA',
                            // color: 'red',
                        },
                    },
                },
                {
                    source: '444',
                    target: '666',
                    deviceType: "JIAOHUAN",
                    lineStyle: {
                        normal: {
                            // color: 'red',
                            color: '#53B5EA',
                        },
                    },
                },
                {
                    source: '555',
                    target: '777',
                    deviceType: "JIAOHUAN",
                    lineStyle: {
                        normal: {
                            color: '#53B5EA',
                            // color: 'red',
                        },
                    },
                },
                {
                    source: '777',
                    target: '888',
                    deviceType: "CAIJI",
                    lineStyle: {
                        normal: {
                            // color: 'red',
                            color: '#53B5EA',
                        },
                    },
                },
                {
                    source: '666',
                    target: '999',
                    deviceType: "YINGYONG",
                    lineStyle: {
                        normal: {
                            // color: 'red',
                            color: '#53B5EA',
                        },
                    },
                },
                {
                    source: '999',
                    target: '1010',
                    deviceType: "YINGYONG",
                    lineStyle: {
                        normal: {
                            // color: 'red',
                            color: '#53B5EA',
                        },
                    },
                },
                {
                    source: '1010',
                    target: '1111',
                    deviceType: "YINGYONG",
                    lineStyle: {
                        normal: {
                            // color: 'red',
                            color: '#53B5EA',
                        },
                    },
                },
                {
                    source: '1010',
                    target: '1212',
                    deviceType: "YINGYONG",
                    lineStyle: {
                        normal: {
                            // color: 'red',
                            color: '#53B5EA',
                        },
                    },
                },
                {
                    source: '1111',
                    target: '13',
                    deviceType: "YINGYONG",
                    lineStyle: {
                        normal: {
                            // color: 'red',
                            color: '#53B5EA',
                        },
                    },
                },
                {
                    source: '1212',
                    target: '14',
                    deviceType: "YINGYONG",
                    lineStyle: {
                        normal: {
                            // color: 'red',
                            color: '#53B5EA',
                        },
                    },
                },
                {
                    source: '111',
                    target: '16',
                    deviceType: "YINGYONG",
                    lineStyle: {
                        normal: {
                            // color: 'red',
                            color: '#53B5EA',
                        },
                    },
                },
                {
                    source: '15',
                    target: '16',
                    deviceType: "YINGYONG",
                    lineStyle: {
                        normal: {
                            // color: 'red',
                            color: '#53B5EA',
                        },
                    },
                },
                {
                    source: '111',
                    target: '16',
                    deviceType: "YINGYONG",
                    lineStyle: {
                        normal: {
                            // color: 'red',
                            color: '#53B5EA',
                        },
                    },
                },
                {
                    source: 'xxxxx1111',
                    target: 'rectangle1',
                    lineStyle: {
                        normal: {
                            // color: 'red',
                        },
                    },
                },
                {
                    source: 'rectangle1',
                    target: 'rectangle2', lineStyle: {
                        normal: {
                            // color: 'red',
                        },
                    },
                },
                {
                    source: 'rectangle2',
                    target: 'rectangle3', lineStyle: {
                        normal: {
                            // color: 'red',
                        },
                    },
                },
                {
                    source: 'rectangle3',
                    target: 'xxxxx1111', lineStyle: {
                        normal: {
                            // color: 'red',
                        },
                    },
                },
                {
                    source: 'xxxxxx222',
                    target: 'rectangle4', lineStyle: {
                        normal: {
                            // color: 'red',
                        },
                    },
                },
                {
                    source: 'rectangle4',
                    target: 'rectangle5', lineStyle: {
                        normal: {
                            // color: 'red',
                        },
                    },
                },
                {
                    source: 'rectangle5',
                    target: 'rectangle6', lineStyle: {
                        normal: {
                            // color: 'red',
                        },
                    },
                },
                {
                    source: 'rectangle6',
                    target: 'xxxxxx222', lineStyle: {
                        normal: {
                            // color: 'red',
                        },
                    },
                },
                {
                    source: '数据采集节点',
                    target: 'rectangle7', lineStyle: {
                        normal: {
                            // color: 'red',
                        },
                    },
                },
                {
                    source: 'rectangle7',
                    target: 'rectangle8', lineStyle: {
                        normal: {
                            // color: 'red',
                        },
                    },
                },
                {
                    source: 'rectangle8',
                    target: 'rectangle9', lineStyle: {
                        normal: {
                            // color: 'red',
                        },
                    },
                },
                {
                    source: 'rectangle9',
                    target: '数据采集节点', lineStyle: {
                        normal: {
                            // color: 'red',
                        },
                    },
                },
            ];

            let option = {
                // backgroundColor: '#000',
                xAxis: {
                    show: false,
                    type: 'value',
                },
                yAxis: {
                    show: false,
                    type: 'value',
                    max: 350
                },
                grid: {
                    left: 50,
                    right: 60,
                    top: 30,
                    bottom: 30,
                },
                tooltip: {
                    formatter: function (x) {
                        let str = `
                            <div>
                                11
                            </div>
                            `
                        return str
                    },
                },
                series: [
                    {
                        type: 'graph',
                        zlevel: 5,
                        draggable: false,
                        coordinateSystem: 'cartesian2d', // 使用二维的直角坐标系（也称笛卡尔坐标系）
                        symbol: 'rect',
                        symbolOffset: ['15%', 0],
                        label: {
                            normal: {
                                show: true,
                            },
                        },
                        data: dataLists,
                        links: linkesList,

                        /** 设置服务器件的连线样式*/
                        lineStyle: {
                            normal: {
                                opacity: 1,
                                // color: '#53B5EA',
                                // curveness: 0.3,
                                width: 2,
                            },
                        },
                    },
                    /** 分发点*/
                    {
                        type: 'lines',
                        coordinateSystem: 'cartesian2d',
                        z: 1,
                        zlevel: 2,
                        animation: false,
                        effect: {
                            show: true,
                            period: 5,
                            trailLength: 0.01,
                            symbolSize: 18,
                            symbol: 'pin',
                            loop: true,
                            color: 'rgba(55,155,255,0.5)',
                        },
                        lineStyle: {
                            normal: {
                                color: '#22AC38',
                                width: 0,
                                // curveness: 0.3,
                            },
                        },
                        data: []
                       // --- 坐标流向设置
                        //  [
                        //    {
                        //       coords: [
                        //          [190, 250],
                        //          [40, 250],
                        //       ],
                        //    },
                        //    {
                        //       coords: [
                        //          [40, 250],
                        //          [120, 290],
                        //       ],
                        //    },
                        //    {
                        //       coords: [
                        //          [120, 290],
                        //          [190, 330],
                        //       ],
                        //    },
                        //    {
                        //       coords: [
                        //          [190, 330],
                        //          [40, 330],
                        //       ],
                        //    },
                        //    {
                        //       coords: [
                        //          [455, 330],
                        //          [610, 330],
                        //       ],
                        //    },
                        //    {
                        //       coords: [
                        //          [610, 330],
                        //          [455, 250],
                        //       ],
                        //    },
                        //    {
                        //       coords: [
                        //          [455, 250],
                        //          [610, 250],
                        //       ],
                        //    },
                        // ],

                    },
                ],
            };
默默无闻的FYH
关注
专栏目录
基于Echarts的数据流向图
weixin_34341229的博客
06-12 5041
模拟数据采集的流程，利用echarts制作出动态的数据流向图：界面：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ECharts</title></head><body> &...
可视化-echarts流向图制作及recharts
symoriaty的博客
01-10 9217
前段时间用echarts做了流程图，在此记录下制作步骤。 一、Echarts是什么 Echarts，缩写来自 Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯 Javascript  的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的...
echarts 关系数据流向图
weixin_46263815的博客
01-05 3937
echarts 动态关系数据流向图
echarts map流向图
最新发布
hrcsdn13的博客
07-23 369
我没有附上CSS代码，所以样式会与图上有所不同。全国各地到上海的流向图。
使用echarts实现带流向的地图
weixin_43505216的博客
08-18 1198
因为工作原因会经常使用到图表，在此记录一下，使用echarts实现简单动态的地图效果。
Echarts 在地图上绘制流向图
rain_pen的博客
10-25 2128
Echarts 在地图上绘制流向图
Echarts关系图
好的品牌，自带传播力
01-07 500
&lt;!DOCTYPE html&gt; &lt;html style="height: 100%"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Echarts关系图解析&lt;/title&gt; &lt;/head&gt; &amp
Echarts关系图的例子
weixin_42519875的博客
03-24 1699
1、普通关系图 option = { title: { text: '数据图谱' }, tooltip: { trigger: 'item', formatter: '{a} : {b}'// 如果用索引关联关系，悬浮窗会写索引。 }, legend : { //=========圖表控件 show : true, data : [ { na
echarts做企业关系图谱_echarts实现group关系图案例
weixin_39778815的博客
12-20 1356
自己在项目中实现了两个group图：1.先看实现效果，两个数据量不同，代码基本上相同2.实现代码2.1.后台代码的实现，主要实现节点和关系线的封装，注意：nodes.name不能重复，图形中显示的是nodes.value值group图的数据结构如下：{"nodes":[{"name":"1210089292475469826","value":"网状结果指标"}],"links":[{"dec":...
echarts3生成关系网络关系力向图
热门推荐
续汉冕的专栏
10-28 2万+
echarts3生成关系网络关系力向图 力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。力引导布局的结果有良好的对称性和局部聚合性，也比较美观，我们也常常用来模拟人物关系等。 echarts3相比于之前的版本有着不小的变化，其生成力向图
echarts连接后台数据流向图实例
05-17
echarts连接后台数据流向图实例，包括数据库文件。 echarts连接后台数据流向图map.jsp.
地图流向图
08-08
echarts 和 百度地图结合使用实现流向图 echarts 和 百度地图结合使用实现流向图
echarts 路径图
05-14
路径图：用于带有起点和重点信息的线数据的绘制，主要用于地图上的航班，路线的可视化。支持二维的直角坐标系和地理坐标系。详细介绍：https://blog.csdn.net/qq_36437172/article/details/106123884
echarts动态关系图示例
11-02
echarts动态加载关系图示例，三层结构，中心关系子层，子层再次关系子层。echarts动态加载关系图示例，三层结构，中心关系子层，子层再次关系子层。
arcgis4.8 echarts 流动线路，迁移图片
10-23
现在的很多的arcgis和echarts都是3.几版本的我做了一个4.8版本的而且封装的很完善，可以直接使用，只需要给，坐标点的参数。arcgis4.8/echarts/线路流动、人口迁移 ，启动方式，直接，node app.js然后http://127.0.0.1:8081/demo/index1-1.html
echarts地图带光柱标记_Cesium实战项目
weixin_39908462的博客
12-20 1168
前言从毕业到现在，差不多两年的时间，一直从事Cesium相关的GIS开发工作，现将项目中最常用的一些功能封装出来，帮助各位刚入门的新同学(大神略过)。说明Cesium实战项目目前共83个实例(后面会继续增加)，项目基于Cesium1.72+VUE 实现，现有实例如下：基础底图1.ArcGIS在线底图2.谷歌在线底图3.高德在线底图点状对象4.Cesium点聚合15.Cesium点聚合26.Bill...
vue+echarts实现流动中国地图（二）
m0_50093785的博客
04-21 1649
1.接上一章，整理出来网上的一个例子，那个例子的截图如下： 2.之前因为没有整理好代码一直没有实现这个例子。现在整理好了。接上一章写，在mounted（）{}中写如下： mounted(){ let data = [ { "name": "北京", "dataCount": [0, 1, 0, 0, 0, 0, 1], "id": "247" }, { "name": "天津", "dataCount": [0, 0,
vue数据可视化界面，智慧图表。Echarts，以及git
weixin_49030317的博客
05-11 2363
一、数据图表 一张图表胜过千万句话 1.1HighChart 概念 兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库 下载 一、通过CDN https://code.highcharts.com.cn/index.html 二、通过NPM下载（用的比较多） npm install highcharts 三、通过官网下载 https://www.highcharts.com.cn/download 通过引入库的方式引入到本地 基本应用 <!DOCTYPE
echarts 实现全球地图流向图迁移图
07-23
要使用 Echarts 实现全球地图流向图迁移图，你可以按照以下步骤进行操作： 1. 首先，确保你已经引入了 Echarts 的库文件。你可以从 Echarts 官网下载最新版本的库文件，并将其引入到你的项目中。 2. 创建一个 HTML 容器，用于显示地图。例如，你可以在 HTML 文件中添加一个 `<div>` 元素，并设置其 id 属性为一个唯一的值，以便在 JavaScript 中引用。 3. 在 JavaScript 中，使用 Echarts 的 API 来配置和绘制地图。首先，创建一个 Echarts 实例，并将其与 HTML 容器关联起来。然后，使用 Echarts 提供的配置项来定义地图的样式和数据。 4. 在配置项中，指定地图的类型为 'map'，并设置地图的名称和样式。例如，你可以选择 'world' 作为地图的名称，并设置地图的背景颜色、边界线颜色等。 5. 定义地图的数据。对于迁移图，你需要提供每个国家/地区的名称和迁移数据。迁移数据通常表示从一个国家/地区到另一个国家/地区的人口流动量。 6. 在配置项中，使用 Echarts 的系列配置项来定义地图的系列。对于流向图迁移图，你可以使用 'lines' 系列来表示迁移线，使用 'effectScatter' 系列来表示迁移起点和终点的圆点。 7. 针对 'lines' 系列，设置线的样式、起点和终点的坐标、线的数值等。针对 'effectScatter' 系列，设置圆点的样式、圆点的坐标等。 8. 最后，使用 Echarts 的实例对象调用 `setOption` 方法，将配置项应用于地图，并在 HTML 容器中显示地图。 这是一个基本的框架，你可以根据自己的需求进一步定制和优化。具体的代码实现细节可以参考 Echarts 的官方文档和示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

默默无闻的FYH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值