echart 的部分参数;

一些自主学习echart时用到的参数。

option = {
        title: {//标题
          // text: '素质课报名人次分类统计',//主标题文本
          subtext: '素质课报名人次分类统计',//副标题文本,'\n'指定换行
          x: 'center',//水平安放位置,默认为'left',可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
          y: '250px',//垂直安放位置,默认为top,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
          textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontFamily: 'Arial, Verdana, sans...',
            fontSize: 12,
            fontStyle: 'normal',
            fontWeight: 'normal',
          },
          subtextStyle: {//副标题文本样式{"color": "#aaa"}
            fontFamily: 'Arial, Verdana, sans...',
            fontSize: 12,
            fontStyle: 'normal',
            fontWeight: 'normal',
          },
          zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas,相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层,canvas对象增多会消耗更多的内存和性能,并不建议设置过多的zlevel,大部分情况可以通过二级层叠控制z实现层叠控制。
          z: 6,//二级层叠控制,默认6,同一个canvas(相同zlevel)上z越高约靠顶层。
        },
        tooltip: {//提示框,鼠标悬浮交互时的信息提示
          show : 'true',//可视
          trigger: 'item', //根据item提示信息
          formatter : "{a} 
{b}: {c} ({d}%)", //提示内容 trigger: 'item',//默认值'item',触发类型,默认数据触发,见下图,可选为:'item' | 'axis' }, // legend: {//图例,每个图表最多仅有一个图例 // orient: 'vertical', // left: 'left', // icon: 'circle',//图标为圆形,默认是方形 // align:'auto', // bottom: 'bottom', // textStyle: { // fontSize: 10, // color: '#666' // } // }, series: [// 系列列表,每个系列通过 type 决定自己的图表类型 { name: '人数', type: 'pie', radius: '50%', label: { normal: { position: 'inside',//inside (自适应,柱状图内部中央),top(柱状外的正上方),left(柱状外的左边),right(柱状外的右边); //坐标[x,y] (以柱状图的顶部为原点) //insideTop,insideBottom,insideRight,insideLeft formatter: '{d}%', textStyle: { color: '#fff', // fontSize: '14px', // fontWeight: '300', } } }, data: [ { value: 1048, name: 'Search Engine' }, { value: 735, name: 'Direct' }, { value: 580, name: 'Email' }, { value: 484, name: 'Union Ads' }, { value: 300, name: 'Video Ads' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; option && myChart.setOption(option); }

较为齐全的参数属性可以看这位大佬的博客:https://www.cnblogs.com/web52...

你可能感兴趣的