echarts图表初始化和常用属性

1.echarts图表初始化和设置相关属性

// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('chart')); 

// 图表相关属性设置
var option = {
      tooltip: {
         show: true
      },
      legend: {
         data:['销量']
      },
      xAxis : [{
        type : 'category',
        data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      }],
      yAxis : [{
        type : 'value'
      }],
      series : [{
        "name":"销量",
        "type":"bar",
        "data":[5, 20, 40, 10, 10, 20]
      }]
};
        
// 为echarts对象加载数据 
myChart.setOption(option); 

                

 

 

2. 常用属性

• 标题（title)

title: { 
        show: true, // 是否显示标题，默认true
	x: 'left', // 水平安放位置，默认为左对齐，可选为： 'center' ¦ 'left' ¦ 'right' // ¦ {number}（x坐标，单位px） 
	y: 'top', // 垂直安放位置，默认为全图顶端，可选为： 'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） 
        left：auto // grid 组件离容器左侧的距离,值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'
        right: 20, //组件离容器右侧的距离   可以是数值，百分比；
        top: auto,  //组件离容器上侧的距离  可以是数值，百分比，或top/middle/bottom;
        bottom: auto,  //组件离容器下侧的距离  可以是数值，百分比；
	textAlign: null // 水平对齐方式，默认根据x设置自动调整 ，可选值：'auto'、'left'、'right'、'center'
	backgroundColor: 'rgba(0,0,0,0)', 
	borderColor: '#ccc', // 标题边框颜色
	borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框） 
	padding: 5, // 标题内边距，单位px，默认各方向内边距为5， // 接受数组分别设定上右下左边距，同css 
	itemGap: 10, // 主副标题纵向间隔，单位px，默认为10， 
	textStyle: { 
		fontSize: 18, 
		fontWeight: 'bolder', 
		color: '#333' // 主标题文字颜色 }, 
		subtextStyle: { 
			color: '#aaa' // 副标题文字颜色 
		} 
}

•  图例（legend）

legend: { 
	orient: 'horizontal', // 布局方式，默认为水平布局，可选为： 'horizontal' ¦ 'vertical' 
	x: 'center', // 水平安放位置，默认为全图居中，可选为： // 'center' ¦ 'left' ¦ 'right' // ¦ {number}（x坐标，单位px）
	y: 'top', // 垂直安放位置，默认为全图顶端，可选为： // 'top' ¦ 'bottom' ¦ 'center' // ¦ {number}（y坐标，单位px） 
        left：auto // grid 组件离容器左侧的距离,值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'
        right: 20, //组件离容器右侧的距离   可以是数值，百分比；
        top: auto,  //组件离容器上侧的距离  可以是数值，百分比，或top/middle/bottom;
        bottom: auto,  //组件离容器下侧的距离  可以是数值，百分比；
	backgroundColor: 'rgba(0,0,0,0)', 
	borderColor: '#ccc', // 图例边框颜色 
	borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框） 
	padding: 5, // 图例内边距，单位px，默认各方向内边距为5， // 接受数组分别设定上右下左边距，同css 
	itemGap: 10, // 各个item之间的间隔，单位px，默认为10， // 横向布局时为水平间隔，纵向布局时为纵向间隔 
	itemWidth: 20, // 图例图形宽度 itemHeight: 14, // 图例图形高度 
	textStyle: { 
		color: '#333' // 图例文字颜色
	},
        inactiveColor: { // 图例关闭时颜色，默认#ccc
            color: '#333'
        },
        selected: { // 控制图例选中状态
            '系列1': true, // 选中'系列1'
            '系列2': false// 不选中'系列2'
        }
},

• 网格（grid，饼图没有）

grid: {
    left: '10%', // left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
    top: top,  // top的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。
    right: '10%', // right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比
    bottom: '10%', // bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比
    backgroundColor: '#ccc', // 网格背景色，默认透明。颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)' ，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'
    borderColor: '#ccc', // 网格的边框颜色,默认为#ccc
}

• 直角坐标系 grid 中的 x 轴（xAxis,饼图没有）

xAxis： {
    name: '温度°c', // 坐标名称
    nameLocation：'end', // 名称显示位置，默认end,可选'start'，'middle' 或者 'center'，'end'
    show： true, // 是否显示X轴，默认显示
    type： 'category', // 默认'category' ，可选'value' 数值轴，适用于连续数据|'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。|'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。|'log' 对数轴。适用于对数数据。
    nameGap： 15, //坐标轴名称与轴线之间的距离
    nameRotate: '30',  // 坐标轴名字旋转，角度值
    axisLine: { // 坐标轴轴线相关设置。
        lineStyle: {
            color: '#ccc' // 坐标轴线线的颜色
        } 
    },
    axisTick:{  // 坐标轴刻度相关设置
        show: true, // 是否显示刻度
        lineStyle： { 
            color: '#ccc' // 刻度线的颜色，默认取 axisLine.lineStyle.color
        },   
    },
    axisLabel: { // 坐标轴刻度标签的相关设置
        rotate: '30', //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度。
        margin: '', // 刻度标签与轴线之间的距离
        color: '#ccc', // 刻度标签文字的颜色
        textStyle: {
            color： '#ccc'
        },
        fontSize: 14   
    },
    splitLine: { // 坐标轴在 grid 区域中的分隔线
        show: true,
        lineStyle: {
           color: ['#aaa', '#ddd'] // 使用深浅的间隔色
        }, 
    } 
}