博客

1.引人echarts.js

<script src="echarts.min.js"></script>

2. 为 ECharts 准备一个具备大小（宽高）的 DOM(文档对象模型)

<div id="main" style="width: 600px;height:400px;"></div>

3.条形图的一些配置参数：

'''1. 设置图表的标题'''
title: {
        text: '这是图表的标题文字'
}
'''2. 鼠标放在图标上面的显示信息,不设置的话就是true'''
tooltip: {show: true}
'''3. 设置图例'''   
legend: {
         data:['图例文字']
}
'''4. 设置x轴的数据'''
xAxis: {
         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
'''5. 设置y轴的数据'''
xAxis: {
         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
'''6. 设置画图的类型'''
series: [{
          name: '鼠标放在图上面的提示文字',
          type: 'bar',  // 以及画图的类型
          data: [画图的数据]
}]
'''7.设置背景色，因为是全局的，所以直接在 option 下设置'''
//可以通过颜色的英文设置
backgroundColor:'red'
'''也可以通过#的方式设置'''     
backgroundColor:'#ffffff'  
'''8. 设置图表中所有文本的颜色'''
'''四个参数分别为RGB的三个颜色以及一个透明度alpha,如果不行设置透明度的话，直接把rgba中的a去掉然后分别再括号里写上RGB对应的三个参数值'''
textStyle: {
            color: 'rgba(255, 0, 255,0.8)'
},
'''9. 设置loading动画  数据加载时，需要时间等待，则可以加上这个动画效果'''、
'''启动动画'''
myChart.showLoading();
'''关闭动画'''
myChart.hideLoading();
'''10. 坐标轴触发，主要在柱状图'''
tooltip : {
           trigger: 'axis'
}
'''11. 相关工具栏的设置'''
toolbox: {
          '''是否显示工具栏'''
          show : true,
          '''显示的工具栏是垂直的还是水平的，默认是水平的'''
          orient : 'vertical',
          '''工具栏图标的大小，默认是15'''
          itemSize:20,
          '''工具栏图标之间的距离，默认是10'''
          itemGap:15,
          '''各工具配置项'''
          feature : {
                     '''展现当前图表所用的数据，编辑后可以动态更新，设置显示该工具，只读设置为false'''
                    dataView : {show: true, readOnly: false},
                    '''动态类型切换,显示该工具，可以添加的类型为，line, bar, stack, tiled'''
                    magicType : {show: true, type: ['line', 'bar']},
                    '''配置项还原工具，设置显示'''
                    restore : {show: true},
                    '''设置是否可以保存图片'''
                    saveAsImage : {show: true}
           }
}
'''12. '''
xAxis : [
        {
'''类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据.还有'value' 数值轴，适用于连续数据,有'time' 时间轴等等'''
         type : 'category',
         name : '这是x轴的名称',
         '''设置x轴名称的的位置，餐厨有('start','center','end')'''
         nameLocation : 'center',
         '''设置x轴名称与x轴的距离，默认是15'''
         nameGap:28,
         '''设置x轴的名称旋转的度数'''
         nameRotate:10,
         '''设置x轴的是否是反向坐标轴，默认就是false'''
         inverse:false,
         '''设置x轴的字体样式'''
         nameTextStyle : {
             '''设置字体颜色'''
             color:'rgb(238,99,99)',
             '''设置坐标轴名称文字字体的粗细'''
             fontWeight:'bold',
             '''设置字体的大小'''
             fontSize:17
                    },
         data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
         }
],
'''13. '''
series : [
         {
              name:'蒸发量',
              type:'bar',
              data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
             '''图表标注'''
              markPoint : {
                  '''标注的数据数组'''
                  data : [
                        '''type:特殊的标注类型，用于标注最大值最小值等,name为标注名称'''
                         {type : 'max', name: '最大值'},
                         {type : 'min', name: '最小值'}
                          ]
              },
              markLine : {
                    '''图表标线'''
                  data : [
                         {type : 'average', name: '平均值'}
                        ]
               }
         },
         {
               name:'降水量',
               type:'bar',
               data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,2.3],
               markPoint : {
                    data : [
                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                        ]
                },
                markLine : {
                    data : [
                            {type : 'average', name : '平均值'}
                          ]
                }
         },

颜色RGB对照大全

Echarts里面内置了两个属性，’light’和’drak’

4. 饼图的配置参数：

'''1. 设置饼图的大小'''
radius: '60%',
'''2. 是否通过设置 roseType 显示成南丁格尔图。南丁格尔图会通过半径表示数据的大小。'''
roseType: 'angle'
'''3. 设置标签的视觉引导线的颜色'''
labelLine: {
    lineStyle: {
        color: 'rgba(255, 255, 255, 0.3)'
    }
}
'''4. 设置扇形的颜色'''
itemStyle: {
    // 设置扇形的颜色
    color: '#c23531',
    //阴影
    shadowBlur: 200,
    //阴影颜色
    shadowColor: 'rgba(0, 0, 0, 0.5)'
}
''' 5. 设置每个扇形的颜色'''
data: [
    { // 第一个扇形的大小
    value:400,  
    name:'第一个标签文本',
    // 设置样式
    itemStyle: {
        color: '#c23531'
       }
    },
    { // 第二个扇形的大小
    value:600,  
    name:'第二个标签文本',
    itemStyle: {
        color: '#c23531'
       }
    }
 ...]
'''6. 鼠标放在图上的高亮显示'''
emphasis: {
           itemStyle: {
           // 高亮时点的颜色。
           color: 'blue'
           },
           label: {
            // 是否显示，默认就是True，
            show: true,
            formatter: '高亮时标签的文字。'
            }
}
'''7. series'''
(1)series-pie.center  :  饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
   支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
   例如：  center: ['50%', '50%']

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    myChart.setOption({
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius: '60%',
                data:[
                    {value:235, name:'视频广告'},
                    {value:274, name:'联盟广告'},
                    {value:310, name:'邮件营销'},
                    {value:335, name:'直接访问'},
                    {value:400, name:'搜索引擎'}
                ]
            }
        ]
    })
</script>

5. 折线图的配置参数

"""有关折线图的setOption的参数"""
'''1. 工具栏的相关设置'''
toolbox: {
                show: true,
                feature: {
                '''数据区域缩放'''
                    dataZoom: {
                    '''指定哪些 yAxis 被控制。如果缺省(none)则控制所有的y轴'''
                        yAxisIndex: 'none'
                    },
                    '''数据视图，即工具栏中的数据视图的相关配置'''
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
'''2. x轴的相关设置'''
 xAxis:  {
                type: 'category',
                '''设置坐标的点是否与x轴的标签对齐，false为对齐，true为不对齐'''
                boundaryGap: false,
                data: ['周一','周二','周三','周四','周五','周六','周日']
            },
'''3. y轴的相关设置'''
yAxis: {
                type: 'value',
                '''坐标轴刻度标签的相关设置'''
                axisLabel: {
                    '''刻度标签的内容格式器，支持字符串模板和回调函数两种形式。'''
                    formatter: '{value} °C'
                }
            },
'''4. 系列列表。每个系列通过 type 决定自己的图表类型'''
series: [
            ///第一个线
            {
                name:'最高气温',
                type:'line',
                data:[11, 11, 15, 13, 12, 13, 10],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                //图表标注线
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            

//第二个线
            {
                name:'最低气温',
                type:'line',
                data:[1, -2, 2, 5, 3, 2, 0],
                markPoint: {
                    data: [
                    '''valueL:设置值，xAxis:标注值的x轴位置，yAxis:标注的y轴设置'''
                        {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine: {
                    data: [
                        //第一个标注线
                        {type: 'average', name: '平均值'},
                        [
                        //第二个标注线文本
                        {
                            symbol: 'none',
                            '''标注相对容器的屏幕 x 坐标'''
                            x: '90%',
                            yAxis: 'max'
                        }, 
                        // 第二个标注线
                        {
                            symbol: 'circle',
                            '''标线的文本位置和值的相关设置'''
                            label: {
                                    '''设置标线文本的位置，start\middle\end''''
                                    position: 'start',
                                    '''标签内容格式器，支持字符串模板和回调函数两种形式'''
                                    formatter: '最大值'
                                }
                            },
                            type: 'max',
                            name: '最高点'
                        }]
                    ]
                }
            }
        ]

6. 散点图的配置参数

'''1. 直角坐标系内绘制网格，'''
grid: {
    show:true,
    '''网格距离容器左边的百分比'''
    left: '5%',
    '''距离右边的'''
    right: '7%',
    '''距离底部的百分比'''
    bottom: '3%',
    //网格的区域是否包含坐标轴的标签
    containLabel: true
},
'''2. 数据项的设置，即鼠标放在点上的提示内容'''
tooltip : {
    ''' function(params) 回调函数的格式 '''
    formatter : function (params) {
        '''seriesName 系列名称
           value  传入的数据值'''
        if (params.value.length > 1) {
            return params.seriesName + ' :<br/>'
            + params.value[0] + 'cm '
            + params.value[1] + 'kg ';
        }
        else {
            return params.seriesName + ' :<br/>'
            + params.name + ' : '
            + params.value + 'kg ';
        }
    },
    axisPointer:{
        show: true,
        '''十字准星指示器'''
        type : 'cross',
        lineStyle: {
            '''线的类型'''
            type : 'solid'
        }
    }
'''3. 散点图的工具栏的相关设置 '''
toolbox: {
    feature: {
        '''数据区域缩放。'''
        dataZoom: {},
        brush: {
        '''使用的按钮，rect:开启矩形框选择功能
            polygon:开启任意形状选择功能
            clear: 清空所有选框'''
            type: ['rect', 'polygon', 'clear']
        }
    }
},
'''4. x轴的相关设置'''
xAxis : [
    {
        type : 'value',
        '''是否脱离0刻度，设置成 true 后坐标刻度不会强制包含零刻'''
        scale:true,
        axisLabel : {
            formatter: '{value} cm'
        },
        '''坐标轴在 grid 区域中的分隔线。'''
        splitLine: {
        '''是否显示分隔线，默认会显示'''
            show: false
        }
    }
],
'''5. series.markArea    图标的标域 常用于标记图表中某个范围的数据'''
markArea: {
    '''默认为 false，即响应和触发鼠标事件。'''
    silent: true,
    '''该标域的样式。'''
    itemStyle: {
        ''' 设置标域为透明(transparent)，或者rgb(c,c,c)形式'''
            color: 'transparent',
        '''描边线宽，为0时无描边'''
            borderWidth: 1,
        '''描边类型： 默认为实线(solid)。/dashed/dotted'''
            borderType: 'dashed'
    },
    '''标域的数据数组'''
    '''分别有标域的左上角的坐标数据以及右下角的数据'''
    data: [[{
        name: '女性分布区间',
        xAxis: 'min',
        yAxis: 'min'
    }, {
        xAxis: 'max',
        yAxis: 'max'
    }]]
},