echarts简单使用

川长思鸟来 2022-04-23 05:22 234阅读 0赞

grid 控制边距

grid:{ 
                left:'3%',right:'7%',bottom:'30'
            }

toolTip 悬浮提示

tooltip : { 
         trigger: 'axis',//axis所有点显示悬浮信息，item只有在折线上标出的点显示悬浮信息（markPoint悬浮信息item时会显示，而axis不显示）
         axisPointer: {  type: 'none' },
         formatter:function (params) { 
                 var str = "";
                 str = str + "&nbsp" + params[0].dataIndex + " 点 至 " + (params[0].dataIndex+1) + " 点</br>";
                 for(var i = 0; i < params.length; i++){ 
                        str = str + params[i].marker + params[i].seriesName + "：" + params[i].value + "</br>";
                 }
                 return str;
           }
    }

legned 图例 data中的值是series中各数据的name，xy图例位置

legend: { 
         data:[
               '订单总数','线上订单数量', '营业厅订单数量'
         ],
         x:"center",
         y:"bottom"
    }

boundaryGap 控制刻度对其（从0开始）

xAxis : [
                { 
                    type : 'category',
                    name : '日期',
                    splitLine:{ show: false},
                    boundaryGap: false,
                    data : [${ xAxisData!noescape}],
                    axisLabel :{ 
                        formatter:function (value, index) { 
                            return value.substr(5).replace("-","/");
                        }
                    }
                }
            ]

minInterval 最小间隔，minInterval:1可避免小数  
max 坐标极限 max:null自适应，使用function返回null时无效  
splitArea 间隔底色，areaStyle:color值为数组类型，按数组中的颜色依次显示

两个柱状图由同一stack时，可以堆叠  
折线图和柱状图有同一name时，可以混合显示  
markPoint , markLine silent:true时不响应事件

series : [
          { 
               name:'订单总数',
               type:'line',
               smooth:true,
               itemStyle:{ normal:{ color:"rgba(255,127,80,1)"}},
                markPoint : { 
                     silent:true,
                     symbol:'pin',
                     symbolSize:'50',
                     data : [
                        { type : 'max', name: '最大值'},
                        { type : 'min', name: '最小值'}
                      ]
                  },
                  markLine : { 
                        silent:true,
                        data : [
                            { type : 'average', name : '平均值'}
                          ],
                         label:{ 
                              position:'end',
                               formatter:function (params) { 
                                      return params.name + ":" + params.value;
                                 }
                             }
                    },
                    data:data.seriesData.split(',')
              },
              { 
                   name:'线上订单数量',
                    type:'bar',
                    stack:'订单数量',
                     itemStyle:{ normal:{ color:"rgba(9,133,210,1)"}},
                         data:data.seriesDataOnline.split(',')
               },
               { 
                    name:'营业厅订单数量',
                    type:'bar',
                    stack:'订单数量',
                    itemStyle:{ normal:{ color:"rgba(135,206,250,1)"}},
                    data:data.seriesDataOffline.split(',')
               }
    ]

setOption设置样式

var daysChart = echarts.init(document.getElementById('daysChart'));
    daysChart.setOption(daysOption);