Echarts加背景图，和实现拖拽

 

  下面是实现Echarts增加背景图的代码    
  var img = new Image();
        img.src = '@System.Web.Configuration.WebConfigurationManager.AppSettings["BackgroundImage"]'

       // 指定图表的配置项和数据

            var option2 = { 
                backgroundColor: {
                    repeat: "repeat",
                    image: img, 
                },

 

下面是实现拖拽的代码

        setTimeout(function () {
            myChartES.setOption({
                graphic:echarts.util.map(dataT, function (item, dataIndex) {
                    return   {
                                type:'circle',
                                //$action: 'replace',
                                position: myChartES.convertToPixel('grid', item),
                                shape: {
                                    cx: 0,
                                    cy: 0,
                                    r: 8,
                                },
                                invisible: true,
                                draggable: true,
                                ondrag: echarts.util.curry(onPointDragging, dataIndex),
                                // ondragleave: echarts.util.curry(onPointDragging, dataIndex),
                                z: 300,
                         };   
                    })
            })
        },0)

        function onPointDragging(dataIndex, dx, dy) {
            console.log(dataIndex)
            var datatemp = myChartES.convertFromPixel('grid', this.position);
            //console.log(datatemp)
            dataT[dataIndex][0] = datatemp[0];
            dataT[dataIndex][1] = datatemp[1];

            myChartES.setOption({
                series: [{
                    id: 'MultiGND',
                   // symbol:  getSymbol(dataT[dataIndex]),
                    data: dataT
                }]
            })

            setEquipmentPosition(dataT[dataIndex][2],datatemp[0], datatemp[1]);
        }

        function setEquipmentPosition(EquipmentNo, x, y) {

            $.ajax({
                type: 'POST',
                url: '@Url.Action("setEquipmentPosition")',
                //contentType: "application/json; charset=utf-8",
                data: {
                    EquipmentNo: EquipmentNo,
                    x: x,
                    y: y,
                       },
                async: false,

                dataType: "json",
                success: function (data) {
                      console.log(data)

                },
                error: function (message) {
                        // alert(message);
                 }
            });
        }

下面是完整的代码  
  function GetEquipmentByOrganizationTest(orgCode) {

        var myChartES = echarts.init(document.getElementById('divStatus'));
        var labelOption = {
            normal: {
                show: true,
                formatter: '{a}:{b}:{c} ',
                fontSize: 16,
                rich: {
                    name: {
                        textBorderColor: '#fff'
                    }
                }
            }
        };

        var symbolSize = 20;
        var dataT = [];// [[15, 0], [-50, 10], [-56, 20], [-46, 30], [-22, 40]];
        var img = new Image();
        img.src = '@System.Web.Configuration.WebConfigurationManager.AppSettings["BackgroundImage"]'

       // 指定图表的配置项和数据

            var option2 = {
                title: { text: '设备布局' ,},
                tooltip: {
                    trigger: 'item',
                    formatter: function (param) {
                        return 'X:' + param.data[0].toFixed(2) + '<br>Y:' + param.data[1].toFixed(2)+ '<br>Y:' + param.data[2] ;
                    },
                },
                grid: {},
                backgroundColor: {
                    repeat: "repeat",
                    image: img, 
                },
                graphic: [
                    {
                        type: 'circle',

                        invisible: false,
                        draggable: true,
                       // ondrag: echarts.util.curry(onPointDragging, dataIndex),
                       // ondragleave: echarts.util.curry(onPointDragging, dataIndex),
                        z:300,
                    },       
                ],
                 xAxis: [
                     {
                         min: 1,
                         max: 100,
                         type: 'value',
                    }
                ],
                yAxis: [
                    {
                         type: 'value',
                         min: 1,
                         max: 100,
                    }
                ],

                series: [
                    {
                        id: 'MultiGND',
                        type: 'line',
                       // label: labelOption,
                        symbolSize: 45,

                        lineStyle: {width:0},
                        symbol: function (param) {
                            return getSymbol(param)
                        },
                        data:dataT,

                        label: {
                            normal: {
                                formatter: function (param) {
                                    return param.data[2];
                                },
                                position: 'bottom',
                                show: true
                            }
                        },
                    },

                  ],
               // color: ['#2E90CD', '#FE0000','#2E90CD', '#FE0000']
            };
        // 使用刚指定的配置项和数据显示图表。

            myChartES.showLoading(); // 加载动画

            myChartES.setOption(option2);

            myChartES.hideLoading();

            GetES(orgCode);

            function GetES(orgCode) {
                var auto = myChartES.getOption();

                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("getEquipmentByOrganization")',
                        //contentType: "application/json; charset=utf-8",
                    data: {
                           OrgCode: orgCode,
                          },
                    async: false,

                    dataType: "json",
                    success: function (data) {
                        var auto = myChartES.getOption();
                        var objData = JSON.parse(data)


                        for (var i = 0; i < objData.length; i++) {

                            dataT.push([objData[i].xAxis, objData[i].yAxis,objData[i].EquipmentNo,objData[i].EquipmentName,objData[i].EquipmentType]);
                        }


                        auto.series[0].data = dataT;

                        myChartES.showLoading(); // 加载动画
                        myChartES.setOption(auto, false);
                        myChartES.hideLoading();
                    },
                    error: function (message) {
                        // alert(message);
                    }
                });
        }

        setTimeout(function () {
            myChartES.setOption({
                graphic:echarts.util.map(dataT, function (item, dataIndex) {
                    return   {
                                type:'circle',
                                //$action: 'replace',
                                position: myChartES.convertToPixel('grid', item),
                                shape: {
                                    cx: 0,
                                    cy: 0,
                                    r: 8,
                                },
                                invisible: true,
                                draggable: true,
                                ondrag: echarts.util.curry(onPointDragging, dataIndex),
                                // ondragleave: echarts.util.curry(onPointDragging, dataIndex),
                                z: 300,
                         };   
                    })
            })
        },0)

        function onPointDragging(dataIndex, dx, dy) {
            console.log(dataIndex)
            var datatemp = myChartES.convertFromPixel('grid', this.position);
            //console.log(datatemp)
            dataT[dataIndex][0] = datatemp[0];
            dataT[dataIndex][1] = datatemp[1];

            myChartES.setOption({
                series: [{
                    id: 'MultiGND',
                   // symbol:  getSymbol(dataT[dataIndex]),
                    data: dataT
                }]
            })

            setEquipmentPosition(dataT[dataIndex][2],datatemp[0], datatemp[1]);
        }

        function setEquipmentPosition(EquipmentNo, x, y) {

            $.ajax({
                type: 'POST',
                url: '@Url.Action("setEquipmentPosition")',
                //contentType: "application/json; charset=utf-8",
                data: {
                    EquipmentNo: EquipmentNo,
                    x: x,
                    y: y,
                       },
                async: false,

                dataType: "json",
                success: function (data) {
                      console.log(data)

                },
                error: function (message) {
                        // alert(message);
                 }
            });
        }
    }