zoukankan      html  css  js  c++  java
  • Echarts

    如果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="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',
                         2,
                        type: 'solid'
                    },
                    shadowStyle : {                       // 阴影指示器样式设置
                         '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'
                 {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: {...},
                    ...
                }
            }
        ]
    };
  • 相关阅读:
    Service Discovery
    Spring security框架原理
    Redis作者谈Redis应用场景
    redis持久化RDB和AOF-转载
    MongoDB树形结构表示法
    Tomcat Connector
    ActiveMQ 负载均衡与高可用(转载)
    JS选取DOM元素的方法
    IObit Driver Booster 无法更新驱动的解决办法
    python 学习备忘
  • 原文地址:https://www.cnblogs.com/nicopoiduang/p/8886329.html
Copyright © 2011-2022 走看看