Echart组件的基本使用

Echarts组件

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

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

<script>
option = {
    //标题组件
    title:{
        show: 'true'    // 默认显示标题组件
        text:'标题文字'   //主标题文本，支持\n换行
        textStyle:{  // 标题样式
                link: 'http://echarts.baidu.com/option.html#title.link', //主标题超文本链接,
                left: 50, // 配置title的位置
                color:'',
                fontStyle:'italic',
                fontWeight:'100',    //100-400,
                lineHeight:56,    //未设置lineHeight，默认取父层级的lineHeight 56
                //rich 自定义富文本样式
                rich:{
                    textSS： {
                        color:''
                        ...
                    }
            },
            subtext:'这是一个副标题'     //副标题
            subtextStyle:{ // 副标题样式
                color:''
                ...
            },
            textAlign:'auto'      //主标题和副标题的水平对齐方式
            textVerticalAlign:'auto'  //主副标题的垂直对齐方式
    }
}
</script>

• 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组件
  图例组件

<script>
    option={
        legend:{
            type:'plain'，      //plain:普通图例 | scroll 可滚动翻页的图例，当图例数量较多时使用
            orient : 'vertical', // 图例列表的布局朝向
            left|top|right|bottom: 20| 20%|center ，       //图例组件离容器的距离，
            itemWidth|itemHeight:xx             //图例标记的图形宽高
            //使用格式化图例文本（字符串模板或回调函数）
            formatter: 'Legend{name}'
            //或
            formatter:function(name){
                return 'Legend'+name
            },
            icon:'circle'       //图例项的icon    circle|rect|roundRect|triangle|diamond|pin|arrow|none
            // 默认不显示，如果legend文字很多时，手动对文字做裁剪并开启tooltip
             formatter:function(name){
                return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
            },
            tooltip:{
                show:true
            }
            textStyle:{
                rich:{
                    Legend:{
                        color:''
                        ...
                    }
                }
            },
            data:['检验数'，'合格数']     //两个图例
            //或者强制修改某一项
            data:[{
                 name:'合格数'，
                 icon:'triangle'
            }]
        }，
        //设置默认只显示一条线，其他图例灰掉
        selected:{
            '检验数':true,
             '合格数':false
        }
    }
</script>

• toolTip组件
  提示框组件

option = {
  tooltip: {
      trigger: 'axis', //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
      formatter : "{a} <br/>{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一起使用

<script>
    option = {
        //设置多个x轴
        xAxis:[
            {
                //position： top|bottom 当有多个x轴的时候
                position:'top',
                //type: category(类目轴，适用于离散的类目数据，必须通过data设置类目数据)|value(数值轴，适用于连续数据)|time(时间轴，适用于连续的时序数据)|log(对数轴，适用于对数数据)
                type:'category',
                data:['周一'，'周二']
            }，
            {
               type:'value',
                min: 10,
                max: 300,
                interval: 10,    //强制设置坐标轴分割间隔
                minInterval: 1   //最小倍数
                maxInterval: ...   //最大倍数
            },
            {
                position:'bottom',
                type:'category',
                data:['12'，'23']
            }，
            {
                position:'bottom',
                //在相同的position上有多个x轴的时候用，相对于默认位置的偏移
                offset:59
                type:'category',
                data:['周一'，'周二']
            }，
            {
                //坐标轴是否是静态，无法交互
                silent:true,
            }
        ]
    }
</script>

• 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 = '<span style="color:#ccc; font-size: 14px;">暂无数据</span>';
    document.getElementById('pieAssets').classList.add('df-ac-jca')
    document.getElementById('pieAssets').innerHTML = html;
}