qq_41357618
qq_41357618
2018-12-29 15:54

echarts值已经给data了就是不显示效果

  • chrome

$(document).ready(function () {
console.log("不是缓存,jquery加载");
function setOption(datas) {
var myChart = echarts.init(document.getElementById('china-map'));
var option = {
title: {
text: '',
subtext: '',
x: 'center'
},
tooltip: {//提示框组件。
trigger: 'item'//数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
},
legend: {
orient: 'horizontal',//图例的排列方向
x: 'left',//图例的位置
data: ['全国分布']
},

                            visualMap: {//颜色的设置  dataRange
                                x: 'left',
                                y: 'center',
                                splitList: [
                                    {start: 1500},
                                    {start: 900, end: 1500},
                                    {start: 310, end: 1000},
                                    {start: 200, end: 300},
                                    {start: 10, end: 200, label: '10 到 200(自定义label)'},
                                    {start: 5, end: 5, label: '5(自定义特殊颜色)', color: 'black'},
                                    {end: 10}
                                ],
                                //            min: 0,
                                //            max: 2500,
                                //            calculable : true,//颜色呈条状
                                text: ['客流量高', '客流量低'],// 文本,默认为数值文本
                                color: ['#E0022B', '#E09107', '#A3E00B']
                            },
                            toolbox: {//工具栏
                                show: true,
                                orient: 'vertical',//工具栏 icon 的布局朝向
                                x: 'right',
                                y: 'center',
                                feature: {//各工具配置项。
                                    mark: {show: true},
                                    dataView: {show: true, readOnly: false},//数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。
                                    restore: {show: true},//配置项还原。
                                    saveAsImage: {show: true}//保存为图片。
                                }
                            },
                            roamController: {//控制地图的上下左右放大缩小 图上没有显示
                                show: true,
                                x: 'right',
                                mapTypeControl: {
                                    'china': true
                                }
                            },
                            series: [
                                {
                                    name: '订单量',
                                    type: 'map',
                                    mapType: 'china',
                                    roam: false,//是否开启鼠标缩放和平移漫游
                                    itemStyle: {//地图区域的多边形 图形样式
                                        normal: {//是图形在默认状态下的样式
                                            label: {
                                                show: true,//是否显示标签
                                                textStyle: {
                                                    color: "rgb(249, 249, 249)"
                                                }
                                            }
                                        },
                                        emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                                            label: {show: true}
                                        }
                                    },
                                    top: "3%",//组件距离容器的距离
                                    data: datas
                                }
                            ]
                        };
                        console.log(option.series[0].data[0].value);
                    }

                    myChart.setOption(option);
                    var datas = [];

                    function getMapData() {

                        $.ajax({
                            type: "post",
                            url: "${link.contextPath}/shops/selectShopMap",
                            dataType: "json",
                            success: function (result) {
                                if (result) {
                                    console.log(result);
                                    for (var i = 0; i < result.length; i++) {
                                        var sname = result[i].name;
                                        var svalue = result[i].value;
                                        var datashop = {name: sname, value: svalue}
                                        datas.push(datashop);
                                    }
                                    console.log(datas);
                                    setOption(datas);//执行setOption函数。传参
                                    /* myChart.setOption({
                                     series: [{
                                     data: datas
                                     }],
                                     });*/

                                }
                            }, error: function () {
                                alert("错误");
                                myChart.hideLoading();
                            }
                        });

                        myChart.on('mouseover', function (params) {
                            var dataIndex = params.dataIndex;
                            console.log(params);
                        });

                }
                getMapData();
                })



                ![图片说明](https://img-ask.csdn.net/upload/201812/29/1546069892_358309.png)

                               console.log(option.series[0].data[0].value);
                                            ![图片说明](https://img-ask.csdn.net/upload/201812/29/1546070027_782008.png)

图片说明

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

0条回答