echarts 常见调整一些细节

echarts饼图去掉指示线

  series : [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius : '75%',
                  label: { //去掉指示线
                    normal: {
                       position: 'inner',
                       show : false
                    }
                  },

柱状图x轴名称太长
方法一 对名称倾斜

 xAxis: {
            data: ["衬衫11111","羊毛二二","雪纺衫111","裤子111","高跟鞋11","袜子111"],//x轴中的数据
            name:"123",//坐标轴名称。
            nameLocation:'end',//坐标轴名称显示位置。
            axisLabel : {//坐标轴刻度标签的相关设置。
                interval:0,
                rotate:"45"
            }
        },

折线图双y轴

yAxis: [
        {
            name: '流量(m^3/s)',
            type: 'value',
            max: 500
        },
        {
            name: '降雨量(mm)',  //右侧y轴名称
            nameLocation: 'start',
            max: 5,
            type: 'value',
            inverse: true //为false  x轴反过来加载数据
        }
    ],

   series: [{
            name: '降雨量',
            type: 'line',
            yAxisIndex: 1, //双y轴
            animation: false,
            areaStyle: {},
            lineStyle: {
                width: 1
            },]

折线图 区间

     {
            name: '流量',
            type: 'line',
            animation: false,
            areaStyle: {},
            lineStyle: {
                width: 1
            },
            markArea: {  //区间
                silent: true,
                color:"rgba(12,176,198,0.07)"; //区间颜色
                data: [[{
                    xAxis: '2009/9/12 7:00'  //这个跟你x轴 名称对上
                }, {
                    xAxis: '2009/9/22 7:00' //这个跟你x轴 名称对上
                }]]
            }

折现图标位置

 legend: {
                data: ['aa','bb'],//跟你series 里{name：}对应
                x: 'center',  //图标在下方
                y: 'bottom',
                textStyle:{  //图标字体颜色
                color:'#FFFFFF'
            },
                //  top: 10
            },

折线图 标点隐藏

     series: [
        {
            type: 'line',
            smooth: 0.6,
            symbol: 'none', //隐藏标点
            lineStyle: {
                color: 'green',
                width: 5
            },

去除背景色

  xAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
             splitLine:{show: false},//去除网格线
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitArea:  //设置背景颜色
                {
                    show:true,
                    areaStyle:
                        {
                            color:[
                                'rgba(100,10,10,0)',
                                'rgba(100,10,10,0)'
                                // 'rgba(123,19,19,0.3)',
                                // 'rgba(100,100,100,0.3)'
                            ]
                        }
                }

        },

折线图显示最大，最小，平均值

 series: [
        {
            name: '最高气温',
            type: 'line',
            data: [11, 11, 15, 13, 12, 13, 10],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'}, //最大
                    {type: 'min', name: '最小值'} //最小
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'} //平均
                ]
            }
        },

 markPoint: {
 //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                 symbol: 'circle', //标记(气泡)的图形
                  symbolSize: 30, //标记(气泡)的大小
                  itemStyle:{
                     color: '#4587E7', //图形的颜色。
                     borderColor: '#000',//图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
                     borderWidth: 0,//描边线宽。为 0 时无描边。
                     borderType: 'solid' //柱条的描边类型，默认为实线，支持 ‘solid’, ‘dashed’, ‘dotted’。
                  },
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },

echarts点击事件重复执行解决方法

  myChar.off('click'); //解绑
    myChar.on('click', function (params) {
        //params.name : 2020-09-09
        var timeDate = params.name;
console.log(timeDate)
        readtable(timeDate)
        // 改变左下角日负荷曲线标题日期和曲线内的数据
        getOneDayLoad(timeDate+" 00:00:00",t)
    });

饼图显示百分比