echarts使用记录

1.折线图
(1)去除y轴线(`在这里插入代码片 axisLine: {
show: false,

                    },`),网格线(`  splitLine: { //去除网格线
                        show: false,
                    },`),不显示刻度线(`   axisTick:{
                        show:false,//不显示刻度线
                        type:'solid'
                    },`)

(2)设置曲线的颜色(以下代码放在series中的第一个对象)

  {
                            type: 'bar',
                            z: 1,
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(33, 43, 124, 0.4)'
                                    }, {
                                        offset: .3,
                                        color: 'rgba(84, 138, 212, 1)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(29, 32, 86, 0.4)'
                                    }],
                                    global: false
                                },
                            },
                            barWidth: '25',
                            data: [0, 0, 0, 0, 0, maxNumber],
                        },

3.使用地图的时候去除地图的南海诸岛

  geo: {
                        map: 'china',
                        aspectScale: 0.75, //长宽比
                        zoom: 1.1,
                        roam: false,
                        itemStyle: {
                            normal: {
                                areaColor: 'rgba(151, 231, 243, 0.1)',//地图设置渐变色
                                borderColor:'#3d53eb',
                                borderWidth: 5,//设置外层边框
                                shadowColor: '#2541a3',
                                shadowOffsetX: 0,
                                shadowOffsetY: 5,
                                // shadowBlur: 20 //设置阴影的大小和立体相互影响
                            },
                            emphasis: {
                              show:false
                            }
                        },
                        // 这里是重点！！！
                        regions: [ //去除南海诸岛
                            {
                                name: "南海诸岛",
                                itemStyle: {
                                    // 隐藏地图
                                    normal: {
                                        opacity: 0, // 为 0 时不绘制该图形
                                    }
                                },
                                label: {
                                    show: false // 隐藏文字
                                }
                            }
                        ],
                    },

然后在series中加入geoIndex:0,
4.在地图上添加散点图

 {
                            type: 'effectScatter',
                            symbolSize: 2,
                            coordinateSystem: 'geo',
                            showEffectOn: 'render',
                            rippleEffect: {
                                period: 4, //动画的时间。
                                scale: 2,//动画中波纹的最大缩放比例。
                                brushType: 'stroke' //波纹的绘制方式，可选 'stroke' 和 'fill'。
                            },
                            hoverAnimation: true,
                            itemStyle: {
                                normal: {
                                    // color: '#ffff',
                                    color: function (e) {

                                        if(e.data.value[2]>=6){
                                            return '#D03A36'
                                        }else if(e.data.value[2]>=3&&e.data.value[2]<6){
                                             return '#9900FF'
                                        }else{
                                            return '#0099FF'
                                        }

                                    },
                                    shadowBlur: 1,
                                    // shadowColor: '#333'
                                }
                            },
                            data: mapList //这边是后台返回的经纬度和名称的数据 数据结构( [{
                                                                    name: '江干区',
                                                                    value: [120.185, 30.274, 29999]
                                                                },])
                          }

5.设置折线图的折线渐变

 itemStyle: {
                        normal: {
                            borderColor: "#9ACAF7",
                            borderWidth:4,
                            color: '#6A5ACD',
                            lineStyle: {        // 系列级个性化折线样式折线图的渐变
                                width: 2,
                                type: 'solid',
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#84D2EF'
                                }, {
                                    offset: 1,
                                    color: '#4F6283'
                                }]),//线条渐变色
                            }
                        },
                    }

6.单个设置折线图上的symbol symbolSize: 14,设置大小
设置圆点的样式

  normal: {
                            borderColor: "#9ACAF7",
                            borderWidth:4,
                            color: '#6A5ACD',
                }

 arr1.forEach((item,index)=>{  //拿到后台返回的数据,设置是否展示symbol,产品需求上最后一个展示,其他的不展示
                if(index!=arr1.length-1){
                    item.symbol = 'none'
                }else{
                    // item.value = item.name

                    item.symbolSize = 15
                }
            })

7.设置y轴上展示几个数据splitNumber这个属性