Echarts

Posted 2020-10-31 生命不息bug不止

如果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: {...},
                ...
            }
        }
    ]
};