前端可视化工具ECharts 学习笔记(一)

这段时间有幸接触到百度开源的前端可视化工具ECharts, 很好很用心的一套工具, 说明文档例子很丰富.

很多年都是在内网不能上外网的工作环境, 所以下面的内容都是记录在OneNote 里面的, 在搬到这里来.

交互：

滚动操作：

option下面

dataZoom: [

            {   // 这个dataZoom组件，默认控制x轴。

                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件

                start: 10,      // 左边在 10% 的位置。

                end: 60         // 右边在 60% 的位置。

            },

            {   // 这个dataZoom组件，默认控制x轴。鼠标滚动变化

                type: 'inside', // 使用这个, 在图里面可以使用鼠标滚轮操作

                start: 10,      // 左边在 10% 的位置。

                end: 60         // 右边在 60% 的位置。

            },

        ],

dataZoom: [

{

id: 'dataZoomX',

type: 'slider',

xAxisIndex: [0],   //有多个x轴的时候用到

filterMode: 'filter'

},

{

id: 'dataZoomY',

type: 'slider',

yAxisIndex: [0],   //有多个Y轴的时候用到

filterMode: 'empty'

}

],

 

dataZoom 的数据窗口范围的设置，目前支持两种形式：

• 百分比形式：即设置 dataZoom.start 和 dataZoom.end。
• 绝对数值形式：即设置 dataZoom.startValue 和 dataZoom.endValue。

 

 

提示框组件 tooltip

 

tooltip: {

                trigger:'axis'

            },

tooltip.trigger   |   string

[ default: 'item' ]

提示框组件的触发类型。

可选：

• 'item'：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
• 'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过  axisPointer.axis 指定坐标轴。
• 'none'：什么都不触发。

 

 

工具栏

toolbox: {

                feature: {

                    magicType: {

                        type: ['line', 'bar', 'stack','tiled']   //线型图,柱状图,堆叠（叠加），平铺

                    },

                    restore: {},  //重置

                    saveAsImage: {   //保存图片

                        pixelRatio: 2

                    }，

dataView:{}//数据试图，一般要重写optionToContent: function(opt) 方法return 表格的html 字符串格式

                }

            },

 

平行的比对线

Series 里面

,{

                    name: '平行于y轴的趋势线',

                    type: 'line',

                    markLine: {

                        silent: true,

                        data:[

                            { yAxis: 12 }, { yAxis: 15 }, {yAxis:20}

                        ]

                    }

                }

 

线型图有填充的

在series 里面

 areaStyle: {

                    normal: {}

                },

 

多y轴， 系列数据指定Y轴

yAxis: [

            { name: '销量1', type: 'value' },

            {

                name: '销量2', type: 'value'

            }

 

        ],

Series 指定Y轴， 序号从0开始，没有指定的话默认用0

yAxisIndex:1,

                data: data2

 

polar.tooltip.axisPointer.type   |   string

[ default: 'line' ]

设置 polar 坐标轴指示器类型。

可选

• 'line' 直线指示器
• 'shadow' 阴影指示器
• 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。

 

y轴显示值处理

axisLabel: {

                    formatter:'{value}rmb'

                }

 

柱状图上面显示数值

        series 里面的

              label: {

                    normal: {

                        show: true,

                        position: 'top',

                        formatter: function (params) {

                            return parseInt(params.value);

                        }

                    }

                }

X轴的一些设置

xAxis.type   |   string

[ default: 'category' ]

坐标轴类型。

可选：

• 'value' 数值轴，适用于连续数据。
• 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
• 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
• 'log' 对数轴。适用于对数数据。

 

X轴显示的文字倾斜度

在xAxis 里面

axisLabel: {

                rotate: 60            }

 

X轴文字显示不全的话, 在option 里面加grid 调整底部

grid: {

            bottom: '80px'

        },

        xAxis: {

            type: 'category',

            data: date,

            axisLabel: {

                interale: 0,

                rotate: 60

            }

        },

 

对X 轴的文字的颜色定义

xAxis: {

            type: 'category',

            boundaryGap: false,

            data: date,

            axisLabel: {

                interale: 0,

                rotate: -60,

                //对x 轴 的文本的单独自定义颜色

                color: function (value,dataIndex) {

                    //alert(dataIndex);

                    if (dataIndex%2==0)

                        return '#000';

                    else

                        return '#ccc';

                }

            }

        },

 

Y轴上显示指针对应的值

在yAxis 里面

axisPointer: {//y轴上显示指针对应的值

                    show:true,

triggerTooltip: false  //不要再有多的提示

                }

在yAxis 里面

axisLine: {//设置Y轴的颜色

                    lineStyle: {

                        color: color2,

                        width:6,  //宽度

                    }

                },

 

 

多个Y轴的位置, 设置Y轴位置

position: 'left',

offset: 70,

效果如下:

lin49940

下面是test 用的html 代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <!-- 引入 ECharts 文件 -->
    <script src="echarts.js"></script>
  <title>ECharts lin49940 test</title>
 </head>
 <body>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 1600px;height:800px;"></div>

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

        // 指定图表的配置项和数据
    var base = +new Date(2014, 9, 3);
    var oneDay = 24 * 3600 * 1000;
    var date = [];
    var data2 = [];
    var data = [Math.random() * 150];
    var now = new Date(base);

    var color1='#f34';
    var    color2 = '#23f';
    function addData(shift) {
        now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
        date.push(now);
        data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
        data2.push((Math.random() - 0.4) * 40 + data[data.length - 1]);
        if (shift) {
            date.shift();
            data.shift();
            data2.shift();
        }
        now = new Date(+new Date(now) + oneDay);
    }
    for (var i = 1; i < 50; i++) {
        addData();
    }
    option = {
        title: {
            text: 'lin49940 test'
        },
        legend: {
            data: ['成交', '成交2']
            //orient:'vertical'    //默认水平方向,这里设置为垂直
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type:'shadow'   //设置为阴影，默认是一条线
            }
        },
        toolbox: {
            feature: {
                magicType: {
                    type: ['line','bar']
                },
                dataView: {
                    optionToContent: function (opt) {
                      
                        let aixsData = opt.xAxis[0].data;
                        //alert(aixsData.length);
                        let series = opt.series;
                        //alert(series.length);
                        let table = '<table  border=1><tbody>';  
                        //标题， 第一列
                        let tdheads = '<tr><td >日期</td>';

                        //标题，第一列以外的, 第三个系列是趋势线,所以减1
                        for (let ii = 0; ii < series.length-1; ii++) {
                            tdheads += '<td >' + series[ii].name + '</td>';
                        }
                        tdheads += '</tr>';
                        table += tdheads;
                        
                        let tdBodys = '';
                        for (let i = 0;i < aixsData.length; i++) {
                            tdBodys += '<tr>';
                            tdBodys += '<td>' + aixsData[i] + '</td>';
                            //alert(tdBodys);  第三个系列是趋势线,所以减1
                            for (let j = 0; j < series.length-1; j++) {
                                //alert(series[j]);
                                tdBodys += '<td>'+ series[j].data[i] + '</td>';
                            }
                            tdBodys += '</tr>';
                        }
                        table += tdBodys;
                        
                        //let table = '<table><tbody>'
                        table += '</tbody></table>';
                        //alert(table);
                        return table;
                    }
                },
                restore: {},
                saveAsImage: {
                    pixelRatio:2
                }
            }
        },
        grid: {
            bottom: '80px'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date,
            axisLabel: {
                interale: 0,
                rotate: -60,
                //对x 轴 的文本的单独自定义颜色
                color: function (value,dataIndex) {
                    //alert(dataIndex);
                    if (dataIndex%2==0)
                        return '#000';
                    else
                        return '#ccc';
                }
            }
        },
        yAxis: [
            {
                name: '销量1',
                type: 'value',
                axisLabel: {//设置Y轴显示值, 自定义需要
                    formatter:'{value}rmb'
                },
                axisLine: {//设置Y轴的颜色
                    lineStyle: {
                        color: color2,
                        width:6,
                    }
                },
                axisPointer: {//y轴上显示指针对应的值
                    show:true
                }

            },
            {
                name: '销量2',
                type: 'value',
                position: 'left',
                offset: 70,
                axisLine: {
                    lineStyle: {
                        color: color1,
                        width: 3,
                    }
                }
            }
            
        ],
        
        dataZoom: [
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                start: 10,      // 左边在 10% 的位置。
                end: 60         // 右边在 60% 的位置。
            },
            {   // 这个dataZoom组件，默认控制x轴。鼠标滚动变化
                type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                start: 10,      // 左边在 10% 的位置。
                end: 60         // 右边在 60% 的位置。
            },
        ],
        
        series: [
            {
                name: '成交',
                type: 'line',
                smooth: true,
                symbol: 'none',
                ///stack: 'a',
                color: color2,
                data: data,
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        formatter: function (params) {
                            return parseInt(params.value);
                        }
                    }
                }
            },
            {
                name: '成交2',
                type: 'line',
                smooth: true,
                symbol: 'none',           
                //stack: 'a',
                color1,
                yAxisIndex:1,
                data: data2
            },
            {
                name: '平行于y轴的趋势线',
                type: 'line',
                markLine: {
                    silent: true,
                    data:[
                       { yAxis: 110 }, { yAxis: 220 }, {yAxis:320}
                    ]
                }
            }
        ]
    };
    /*
    setInterval(function () {
        addData(true);
        myChart.setOption({
            xAxis: {
                data: date
            },
            series: [{
                name: '成交',
                data: data
            }]
        });
    }, 500);
    */
    
        // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    </script>
 </body>
</html>