码迷,mamicode.com
首页 > 其他好文 > 详细

Echarts

时间:2018-04-19 23:59:48      阅读:1052      评论:0      收藏:0      [点我收藏+]

标签:通过   sub   圆角   ini   js代码   number   document   map   后退   

如果Echarts是通过单标签引入,那么就没必要用require(),直接用名称即可

<script src="js/echarts.min.js"></script> //单标签引入

<script>
    var echart = require(echarts); //非单标签引用时使用
    var echart = echarts; //单标签引用时直接使用名字
</script>

 

Echarts需要放在一个有宽高的容器中,然后在容器中初始化Echarts
js代码要放在加载事件中或者要初始化的容器之后,否则找不到容器
<div id="zhuxingtu" style="width:600px;height=400px;"></div>

<script>
   var init =  echart.init(document.getElementById(zhuxingtu));  //初始化  
</script>

 

bar 柱状图 line 折线图 k K线图 scatter 散点图 radar 雷达图 pie 饼图 map 地图
 
数据设置
绘制柱状图
init.setOption( //设置数据
    {
        title:{ //标题
            text:标题,
            x:center, //标题水平位置 left,center,right
            y:bottom //标题垂直位置 top,center,bottom
            borderColor: red, //标题边框颜色
            borderWidth: 2,  //标题边框宽度
            fontWeight: bolder, //标题加粗
            textStyle: {
                fontSize: 18,
                fontWeight: bolder,
                color: #333          // 主标题文字颜色
            },
            subtextStyle: {
                color: #aaa          // 副标题文字颜色
            }
        },
        borderColor: #ccc, //边框颜色
        backgroundColor:#cccccc, //背景颜色
        tooltip: {
            trigger: item,           // 触发类型,‘item‘ | ‘axis‘
            showDelay: 20,             // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
            hideDelay: 100,            // 隐藏延迟,单位ms
            transitionDuration : 0.4,  // 动画变换时间,单位s
            borderRadius: 4,           // 提示边框圆角,单位px,默认为4
            axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                type : line,         // 默认为直线,可选为:‘line‘ | ‘shadow‘
                lineStyle : {          // 直线指示器样式设置
                    color: #48b,
                    width: 2,
                    type: solid
                },
                shadowStyle : {                       // 阴影指示器样式设置
                    width: auto,                   // 阴影大小
                    color: rgba(150,150,150,0.3)  // 阴影颜色
                }
                },
        },
        legend: { //图例
            data:[销量,123]
             orient: horizontal,      // 布局方式,默认为水平布局,可选为:
                                        // ‘horizontal‘ | ‘vertical‘
             x: center,               // 水平安放位置,默认为全图居中,可选为:
                                        // ‘center‘ | ‘left‘ | ‘right‘
             y: top,                  // 垂直安放位置,默认为全图顶端,可选为:
                                        // ‘top‘ | ‘bottom‘ | ‘center‘
            padding: 5,                // 图例内边距,单位px,默认各方向内边距为5,
                               // 接受数组分别设定上右下左边距,同css
            itemGap: 10,               // 各个item之间的间隔,单位px,默认为10,
                               // 横向布局时为水平间隔,纵向布局时为纵向间隔
            itemWidth: 20,             // 图例图形宽度
            itemHeight: 14,            // 图例图形高度  
        },
        dataRange: {//值域
            splitNumber: 5,            // 分割段数,默认为10,为0时为线性渐变
            color:[#1e90ff,#f0ffff],//从第一个颜色渐变到第二个颜色 
            text:[,],         // 文本,默认为数值文本
        },
        toolbox: {//工具箱
            orient: horizontal,      // 布局方式,默认为水平布局,可选为:
                                       // ‘horizontal‘ | ‘vertical‘
            x: right,                // 水平安放位置,默认为全图右对齐,可选为:
                                       // ‘center‘ | ‘left‘ | ‘right‘
                                       // | {number}(x坐标,单位px)
            y: top,                  // 垂直安放位置,默认为全图顶端,可选为:
                                       // ‘top‘ | ‘bottom‘ | ‘center‘
                                       // | {number}(y坐标,单位px)
            color : [#1e90ff,#22bb22,#4b0082,#d2691e],
            backgroundColor: rgba(0,0,0,0), // 工具箱背景颜色
            borderColor: #ccc,       // 工具箱边框颜色
            borderWidth: 0,            // 工具箱边框线宽,单位px,默认为0(无边框)
            padding: 5,                // 工具箱内边距,单位px,默认各方向内边距为5,
                                       // 接受数组分别设定上右下左边距,同css
            itemGap: 10,               // 各个item之间的间隔,单位px,默认为10,
                                       // 横向布局时为水平间隔,纵向布局时为纵向间隔
            itemSize: 16,              // 工具箱图形宽度
            featureImageIcon : {},     // 自定义图片icon
            featureTitle : {
                mark : 辅助线开关,
                markUndo : 删除辅助线,
                markClear : 清空辅助线,
                dataZoom : 区域缩放,
                dataZoomReset : 区域缩放后退,
                dataView : 数据视图,
                lineChart : 折线图切换,
                barChart : 柱形图切换,
                restore : 还原,
                saveAsImage : 保存为图片
            }
        },
        dataZoom: {//区域缩放
            orient: horizontal,      // 布局方式,默认为水平布局,可选为:
                                       // ‘horizontal‘ | ‘vertical‘
            width: {number},        // 指定宽度,横向布局时默认为根据grid参数适配
            height: {number},       // 指定高度,纵向布局时默认为根据grid参数适配
            dataBackgroundColor: #eee,            // 数据背景颜色
            fillerColor: rgba(144,197,237,0.2),   // 填充颜色
            handleColor: rgba(70,130,180,0.8)     // 手柄颜色
        },
        color : [#ff7f50,#87cefa, #61a0a8, #d48265, #91c7ae],//柱状图颜色
        xAxis:{ //X轴
            type:""; //category 类型 value 值
            data:["XXX","XXX"],
            axisLable:{
                interval:0, //字体间隔
                rotate:45, //字体旋转
                margin:15, //字体和线的距离
                textStyle:{
                    color:"red",//字体颜色
                    fontsize:12 //字体大小
                }
            }
        },
        yAxis:{ //y轴
             name: 数量, //轴的名称
             min:0, //最小值
             max:700 //最大值
        }
    }
);

 

一般echarts用于绝对布局这种容易理解的布局方式。但是有时候容器尺寸极端时,这种方式并不能自动避免组件重叠的情况,尤其在移动端小屏的情况下。

另外,有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。

为了解决这个问题,ECharts 完善了组件的定位设置,并且实现了类似 CSS Media Query 的自适应能力。

 

media中不写query的option表示默认值,所有query不满足时使用这个option

option = {
    baseOption: { // 这里是基本的option
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },
    media: [ // 这里定义了 media query 的逐条规则。
        {
            query: {...},   // 这里写规则。
            option: {       // 这里写此规则满足下的option。
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二个规则。
            option: {       // 第二个规则对应的option。
                legend: {...},
                ...
            }
        },
        {                   // 这条里没有写规则,表示『默认』,
            option: {       // 即所有规则都不满足时,采纳这个option。
                legend: {...},
                ...
            }
        }
    ]
};

 

Echarts

标签:通过   sub   圆角   ini   js代码   number   document   map   后退   

原文地址:https://www.cnblogs.com/nicopoiduang/p/8886329.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!