Echarts:

1.給y軸上間隔線設(shè)置成虛線

yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            axisLine: {show: false},
            axisTick: {
                show: false //y軸上不顯示刻度
            },
            axisLabel: {           // 坐標軸文本標簽碌嘀，詳見axis.axisLabel
                show: true,
                rotate: 0,
                margin: 20,
                textStyle: {       // 其余屬性默認使用全局文本樣式虏冻，詳見TEXTSTYLE
                    color: 'rgba(0,0,0,0.65)'
                }
            },
            splitLine:{//間隔線
                show:true,
                lineStyle:{
                    type:'dashed',//設(shè)置成虛線
                    color:'#E8E8E8'
                }
            }
        },

2.echarts的x軸和y軸都隱藏

option = {
     xAxis: {
        type: 'category',
        show:false
    },
    yAxis: {
        type: 'value',
        show:false
    },
    series: [{
        symbol: "none",//隱藏折線上的小圓點
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

3.設(shè)置圖表的上下間隔線是實線，其余是虛線

   //把xAxis設(shè)為數(shù)組，寫兩個x軸，其余的橫向間隔線在y坐標軸設(shè)置
    xAxis: [{
        type: 'value',
        name: '',
        splitLine: {
            show: false,
        },
       },{
        type: 'category',
       }],
        

4.散點圖中的氣泡圖：標記最大值和做標示線(業(yè)務(wù)需求：篩選出不同類別中最大的那個值并做特殊樣式處理酝掩，比如加個圖片表明是最大值)

series: [{
        markPoint:{//在最大值處加一張圖
            symbol : 'image://./static/img/icon-1/symbols-logo-1.png',
        symbolSize : 10,
        symbolOffset:[0,'-50%'],
            effect : {
                show : true
             },
        label:{
          color:'#FFF',
          fontStyle:14,
          align:'center',
          verticalAlign:'center',
          position: ['50%', '100%']
        },
        data:[{
            name: '最大值',
            type: 'max',
            valueIndex:1
             }],
        },
        markLine:{   //做標記線
                symbol: 'none',
        lineStyle: {
            color: '#5B6DC8',
        },
        label: {
            normal: {
            position: "end",
                backgroundColor: '#101641',
                padding: [10, 20],
                borderRadius: 4,
                color: '#FFF',
                formatter: '',
            },
        },
        animation: false,
        data: [{
            name: 'y軸平均值',
            yAxis: avgY
            },{
            name: 'x軸平均值',
            xAxis: avgX
        }],
         }
    }]

同上：標出最大值(在不同的類別添加標注點眷柔，這種寫法只能在一個類別中添加一個標注點期虾，可以通過在markPoint中的data設(shè)置數(shù)組來添加多個標注點，不過每個標注點的樣式只能相同驯嘱，要想在不同的類別中添加多個標注點且每個標注點樣式不同镶苞，可以用label屬性)

var makeMarkPoint = function (index, url, size, offset, coord) {  
                option.series[index].markPoint = {
                    symbol: 'image://' + url,  //圖片url
                    symbolSize: size,  //設(shè)置標注圖片的大小
                    symbolOffset: offset,  //圖片位置
                    label: {   //標注文字樣式
                        color: '#FFF',
                        fontStyle: 30,
                        align: 'center',
                        verticalAlign: 'middle',
                        position: ['50%', '150%'],
                        formatter: ''
                    },
                    data: [{  //需要進行標注的坐標
                        name: domainDataIndex[index],
                        coord: coord
                    }],
                }
            }
            
makeMarkPoint(index1,'./static/img/top1.png', 40, [0, '-100%'], domainDataCoord[0])
            

var data = [[28604,77,17096869,'11',1990],[31163,77.4,27662440,'22',1990],[1516,68,1154605773,'33',1990]]
    
 //在同一類別下添加多個標注點
    var array1 = [];
    var array2 = [];
    var array3 = [];
    for (var j = 0; j < dataArr.length; j++) { //把數(shù)據(jù)放在一個加入了圖片url的數(shù)組中
        if (max1 == dataArr[j]) {
            datatop3Arr[j].push('./static/img/top1.png');
            array1.push(datatop3Arr[j])
        }
        if (max2 == dataArr[j]) {
            datatop3Arr[j].push('./static/img/top2.png');
            array2.push(datatop3Arr[j])
        }
        if (max3 == dataArr[j]) {
            datatop3Arr[j].push('./static/img/top3.png');
            array3.push(datatop3Arr[j])
        }
    }
    var poptotalarray = [];
    poptotalarray = poptotalarray.concat(array1, array2, array3)

 
    var nameforindex = function (str) {
        if (str == '11') return 0
        if (str == '22') return 1
        if (str == '33') return 2
        if (str == '44') return 3
        if (str == '55') return 4
    }
    var yetaiArray1 = []
    var yetaiArray2 = []
    var yetaiArray3 = []
    var yetaiArray4 = []
    var yetaiArray5 = []
    for (var j = 0; j < poptotalarray.length; j++) {
        var index = nameforindex(poptotalarray[j][4]);
        var pop = {
            name: poptotalarray[j][3],
            coord: [poptotalarray[j][0], poptotalarray[j][1]]
        }
        if (index == 0) yetaiArray1.push(pop);
        if (index == 1) yetaiArray2.push(pop);
        if (index == 2) yetaiArray3.push(pop);
        if (index == 3) yetaiArray4.push(pop);
        if (index == 4) yetaiArray5.push(pop);
    }

用label設(shè)置圖片

（max1,max2,max3為最大的三個值）
    option.series[i].label = {
        show: true,
        position: 'insideTop',//設(shè)置位置在中上
        formatter: function (value) {
            var val = value.data[3];
            var strs = val.split(''); //字符串數(shù)組
            var str = '';
            for (var i = 0, s; s = strs[i++];) { //文本超過三個字就換行
                str += s;
                if (!(i % 3)) str += '\n'; 
            }
            if (parseInt(value.data[2]) == max1) {  
                return [
                    '{topimg1|}',
                    '{value|' + str + '}',
                ].join('\n');
            } else if (parseInt(value.data[2]) == max2) {
                return [
                    '{topimg2|}',
                    '{value2|' + str + '}',
                ].join('\n');
            } else if (parseInt(value.data[2]) == max3) {
                return [
                    '{topimg3|}',
                    '{value3|' + str + '}',
                ].join('\n');
            }
            return ""
        },
        offset: [0, -18],
        textBorderColor: 'transparent',
        rich: {
            value: {
                lineHeight: 15,
                align: 'center',
                color: '#FFF',
                fontWeight: 'bold',
                fontSize: 16,
                padding: [-30, 0, 0, 0]
            },
            value2: {
                lineHeight: 15,
                align: 'center',
                color: '#FFF',
                fontWeight: 'bold',
                fontSize: 14,
                padding: [-20, 0, 0, 0]
            },
            value3: {
                lineHeight: 15,
                align: 'center',
                color: '#FFF',
                fontWeight: 'bold',
                fontSize: 12,
                padding: [-10, 0, 0, 0]
            },
            topimg1: {
                height: 40,
                align: 'center',
                backgroundColor: {
                    image: './static/img/top1.png'
                },

            },
            topimg2: {
                height: 40,
                align: 'center',
                backgroundColor: {
                    image: './img/top2.png'
                },
                width: 30,
                height: 30
            },
            topimg3: {
                height: 40,
                align: 'center',
                backgroundColor: {
                    image: './static/img/top3.png'
                },
                width: 20,
                height: 20
            }
        }
    };

在AntV中給label文字格式化設(shè)置圖片

.label('name', {
    labelLine: false, // 不顯示文本的連接線
    offset: 30, // 文本距離圖形的距離
    htmlTemplate: (text, item, index) => {
      const point = item.point; // 每個弧度對應(yīng)的點
      let percent = point['percent'];
      percent = (percent * 100).toFixed(2) + '%';
      return '<span class="title" style="display: inline-block;width: 50px;">' + text + '</span><br><span style="color:' + point.color + '">' + percent + '</span>'; // 自定義 html 模板
    }
  });

5.標記點設(shè)置成圓環(huán)

    option.series[0].markPoint = { 
                    symbolSize: 15, 
                    symbol: 'circle',
                    itemStyle: {
                        normal: {
                            borderColor: '#45DD54',//環(huán)的顏色
                            color: "#1B235B",//環(huán)內(nèi)的背景色
                            borderWidth: 3, //環(huán)的寬度
                            label: {
                                show: true,
                                backgroundColor: '#45DD54',
                                padding: [6, 20],
                                borderRadius: 4,
                                color: 'white',
                                lineHeight: 20,
                                position: 'top',
                                formatter: '{title|鞠评}\n{num|{c}} %',
                                rich: {
                                    title:{
                                        fontWeight: 'bold',
                                        color: '#fff',
                                        fontSize:16
                                    },
                                    num: {
                                        fontWeight: 'bold',
                                        color: '#fff',
                                        fontSize:20
                                    },

                                }
                            }
                        },
                    },
                    effect: {
                        show: true,
                        shadowBlur: 0
                    },
                    data: [{
                        name: '',
                        value: pointY,
                        xAxis: dateData[20],
                        yAxis: pointY
                    }, ],

                },

6.給標記點設(shè)置背景圖片（適用于背景是對話框有箭頭的樣式）

itemStyle: {
        normal: {
            label: {
                show: true,
                backgroundColor: {
                    image:'./static/img/symbols-up.png',//設(shè)置背景圖
                },
            }
        }
    }   

7.柱狀圖的柱子設(shè)置不同的顏色

series : [
        {
            name:'直接訪問',
            type:'bar',
            barWidth: '60%',
            color: function(val){
                if(val.value == 220){ //位于某個特定值的柱子設(shè)置一個特殊的顏色
                    return "red"  
                }
                return "green";    
            },
            data:[10, 52, 200, 334, 390, 330, 220]
        }
    ]

8.漏斗圖左部分文字左對齊

option = {
    grid: {
        left: 100
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {}
        }
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: function(a,ix){
                return ix;
            }
        },
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    xAxis: {
        show: false
    },
    series: [
        {
            name: 'City Gamma',
            type: 'bar',
            data: [0, 0, 0]
        },
        {
            name: '實際',
            type: 'funnel',
            left: '10%',
            width: '80%',
            maxSize: '80%',
            label: {
                normal: {
                    position: 'inside',
                    formatter: '{c}%',
                    textStyle: {
                        color: '#fff'
                    }
                },
                emphasis: {
                    position:'inside',
                    formatter: '茂蚓實際: {c}%'
                }
            },
            itemStyle: {
                normal: {
                    opacity: 0.5,
                    borderColor: '#fff',
                    borderWidth: 2
                }
            },
            data: [
                {value: 30, name: ''},
                {value: 10, name: ''},
                {value: 5, name: ''},
                {value: 50, name: ''},
                {value: 80, name: ''}
            ]
        }
    ]
};

9.散點圖設(shè)置點均勻分布

是否是脫離 0 值比例。設(shè)置成 true 后坐標刻度不會強制包含零刻度剃幌。在雙數(shù)值軸的散點圖中比較有用聋涨。

{
    scale:true
}

也可以設(shè)置x軸和y軸的最小最大值，達到自己想要的效果

10.設(shè)置echarts圖表隔一段時間刷新

setInterval(function(){
    refresh.call(me);
}, echartsRefreshInterval);

var refresh = function(){
    var div = this.node.root.insertBefore(document.createElement("div"), this.node.echarts);
    $(div).css({
        position: "absolute",
        top: "0",
        left: "0",
        right: "0",
        bottom: "0"
    });
    this.dom.removeDomNode(this.node.echarts);
    this.node.echarts = div;
    this.eChart = echarts.init(this.node.echarts);
    this.eChart.setOption(this.currData, true);
};

11.氣泡圖數(shù)據(jù)多负乡，氣泡重疊在一起的問題

可以統(tǒng)一給所有氣泡x軸的數(shù)據(jù)增加20牍白，幫助分散

12.二級圖例

    <div
        class="item"
        v-for="(item, index) in arr"
        :key="index"
        :class="{ isSelected: index == indexSelected }"
        @click="filter(item, index)"
    >
        <div
          class="item-chunk"
          :style="{ background: `${indexSelected == index && item.isSelect ? item.color : '#999'}` }"
        ></div>
        <div class="item-title">{{ item.title }}</div>
    </div>

filter(code, index) {
      // myChart 的參數(shù)
      code.isSelect = !code.isSelect
      this.indexSelected = index
      var options = this.chartColumn.getOption()
      var selectLegend = options.legend
      for (var i = 0; i < this.arr.length; i++) {
        if (i !== index) this.arr[i].isSelect = false
      }

      for (const key in selectLegend) {
        if (code.isSelect && selectLegend[key].id === code.title) {
          selectLegend[key].show = true
        } else {
          selectLegend[key].show = false
        }
      }
      this.chartColumn.setOption(options, true) // 重新渲染該圖片
    },

highCharts

1.設(shè)置y軸間隔線為虛線

yAxis: {
        gridLineDashStyle: 'ShortDash',//網(wǎng)格線樣式
       },

2.dataLabels線太長導致圖片寬度小時，label自動變省略號看不到

plotOptions: {
    pie: {
        dataLabels: {
            enabled: true,
            format: '{point.name}',
            style: {
                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                fontSize: '12px',
                fontWeight: 'normal'
            },
            distance:10 //設(shè)置distance改變指示線的長度
        },
        showInLegend: true,
        startAngle: 0, // 圓環(huán)的開始角度
        endAngle: 360,    // 圓環(huán)的結(jié)束角度
        center: ['50%', '50%'],
                size:this.pieSize
    }
},

3.在y軸添加標記線（比如預警線）

plotLines: [
            {
                color: "#BFBFBF",
                dashStyle: "dash",
                width: 1,
                value: 24304,
                label: {
                    useHTML:true,
                    text: "預警線<br/>30萬",
                    align: "right",
                    style: {
                        color: "#919191",
                        fontSize: "10px"
                    },
                    x:10
                },
                zIndex:9999
            }
        ]