Echart组件的基本使用

Echarts组件

echarts.js规定只能使用dom原生方法获取标签。即document.getElementById('main')；

• title组件
  标题组件（主标题和副标题）

• toolBox组件
  工具栏

option = {
    toolbox: {
    show: true, //是否显示工具栏组件
    orient: 'vertical', //工具栏icon的布局朝向
    itemSize: 18, //工具栏icon的大小
    itemGap: 20, //item之间的间距
    right: 20, //toolbox的定位位置
    feature: { 
        saveAsImage: { show: true }, //导出图片
        dataView: { show: true }, //数据视图
        magicType: { //动态类型切换
            type: [ 'line', 'bar' ]
        },
        dataZoom: { show: true }, //数据区域缩放
        restore: { show: true }, //重置
    }
    }

• legend组件
  图例组件

• toolTip组件
  提示框组件

option = {
  tooltip: {
      trigger: 'axis', //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
      formatter : "{a} 
{b} : {c} ({d}%)",  // 格式化
      backgroundColor:"transparent",            //标题背景色
      borderColor:"#ccc",                       //边框颜色
      borderWidth:0,                            //边框线宽
  }
}

• markPoint和markLine组件

option = {
  markPoint: {
    data: [
        { type: 'max', name: '最大值' },
        { type: 'min', name: '最小值' }
    ]
  },
  markLine: {
    data: [
        { type: 'average', name: '平均值' },
        { type: 'max', name: '最大值' },
        { type: 'min', name: '最小值' }
    ]
  }
}

• xAxis
  x轴，一般单个grid组件最多只能放上下两个x轴，多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠
  注意：必须和yAxis一起使用

• series系列数据

option = {
    type : 'line', // 设置图例类型
    name: 'name',系列名称，用于tooltip的显示，legend的图例筛选
    radius: '10', // 圆角
}

$(function () {
    var axisData= ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
    var seriesData = [{ name: '直接访问', data: [320, 302, 301, 334, 390, 330, 320] },
    {name: '邮件营销', data: [120, 132, 101, 134, 120, 230, 210]},
    {name: '联盟广告', data: [220, 182, 191, 234, 290, 330, 310]},
    {name: '视频广告', data: [150, 212, 201, 154, 190, 330, 410]},
    { name: '搜索引擎', data: [820, 832, 901, 934, 1290, 1330, 1320] }];
})

• 显示暂无数据

if (data.data.length !== 0) {
    var obj= echarts.init(document.getElementById('chart'));
    obj.setOption(options);
} else {
    var html = '暂无数据';
    document.getElementById('pieAssets').classList.add('df-ac-jca')
    document.getElementById('pieAssets').innerHTML = html;
}