Echart图表

http://echarts.baidu.com/echarts2/doc/doc.html

1、 Labelline标示线和label文字(下图所示)

标示线和指示的文字是由以下两个属性控制的:

itemStyle : {
          normal : {
            label : {
              show : false   //控制标签
            },
            labelLine : {
              show : false   //控制标签线
            }
          },

        },

实际使用场景:

series: [{
        name: '考生数量',
        type: 'pie',
        radius : ['50%', '70%'],
        hoverAnimation: true,
        itemStyle : {
          normal : {
            label : {
              show : false
            },
            labelLine : {
              show : false
            }
          },

        },
        data: echartData
      }]

 

 

2、折线上面的小圆点以及让曲线平滑

Echart 去掉折线上面的小圆点: 只需要加上symbol: "none"即可:
Echart 让曲线平滑: 只需要加上  smooth:true  即可:

series:[{
    symbol: "none", //去掉圆点
    name: "seriesName",
    type: "line",
  smooth:true,  //让曲线变平滑的  
    data: "seriesData"
}]

 

 

3、图表大小 

radius: ['60%', '70%'],   //左为圆环内圈大小,右为圆环外圈大小,
radius : '55%',   //单圆

 

4、标题

tooltip: {
        show: false
    },

 

5、点击/鼠标hover显示的小标签

 

tooltip : {
        trigger: 'item',    
        formatter: "{b} : {c} ({d}%)"   //图中“固定:335(38.11%)”
    }

 

6、相对容器的位置

series : [
        {
            center: ['50%', '50%'],  //第一个数值改为70%为图2,第二个数值改为70%为图3
		}
		]

7、圆中心的文字

控制

series: [
        {
           label: {
                emphasis: {        //主要是这个
                    show: false,  //控制显示
                    textStyle: {   //文字样式
                        fontSize: '30',
                        fontWeight: 'bold'
                    }}}}]

8、左/右上角的图标

 

legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
        textStyle: {
                color: '#ccc',  //文字样式
            }
    },

父级为:option = {},要去除直接删掉即可。

 

9、柱型和折线图表在移动端显示过小:

grid: {
						x: 35,
						x2: 10,
						y: 30,
						y2: 25
					},

 

grid为绘图区域,父级为:option = {}

 

10、……

trigger: 'axis'//tooltip触发方式:axis以X轴线触发,item以每一个数据项触发 

 

11、坐标轴样式:

xAxis:  {
        type: 'value',
		axisLine: {
                    lineStyle: {
                        color: '#ccc' //控制颜色
                    }
                },
    },
    yAxis: {
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日'],
		axisLine: {
                    lineStyle: {
                        color: '#ccc' //控制颜色
                    }
                },
    },

12、每个数据区块的颜色设置:

 

series: [{  
            data:[
                {value:335, name:'直接访问',itemStyle: {normal: {color: '#4bd2cc'} }},
                {value:310, name:'邮件营销',itemStyle: {normal: {color: '#f8ae4f'} }},
            ]
        }]

 

阅读更多

没有更多推荐了,返回首页