数据可视化echarts学习笔记

echarts

官网https://echarts.apache.org/zh/index.html

使用

1.首先需要先引入echarts

html直接引入js文件

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

vue项目中需要先安装

npm install echarts --save

然后在需要的地方引入

import * as echarts from 'echarts'

2.初始化dom节点

首先得有一个dom节点容器

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

然后对其进行echarts初始化

    let myCharts = echarts.init(document.getElementById('main'))

3.配置option，绘制一个图标

let option = {
    title:{
        text:'echars使用示例',
        subtext:'副标题'
    },
    legend:{
        data:['series']
    },
    tooltip:{},
    xAxis:{
        type:'category',
        data:['星期一','星期二','星期三','星期四','星期五','星期六','星期日',]
    },
    yAxis:{
        type:'value'
    },
    series:[
        {	
            name:'series',
            type:'bar',
            data:[10,20,30,40,50,60,70]
        }
    ]
}

4.使用上述设置的option显示图表

myCharts.setOption(option)

成功显示

渐变色

有个echarts.graphic.LineaGradient()一个方法可以用来设置渐变色.其中有五个参数，前四个参数分别代表变色方位右下上左，0,0,0,1表示渐变色从正上方开始，1，0，0，0，表示渐变色从右边开始等，

第五个参数是一个数组，用于配置颜色的渐变过程，offset范围为0~1,color表示颜色，可以设置多个颜色渐变

上代码

{
            type: 'bar',
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'yellow'
                }, {
                    offset: 1,
                    color: 'red'
                }])
            },
            data: [10, 20, 30, 40, 50, 60, 70]
        }

还有另一种渐变方式

线性渐变，前四个参数分别是 x0, y0, x2, y2, (右下左上)范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 true，则该四个值是绝对的像素位置

下述代码和上面的示例效果一样

 color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'red' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'yellow' // 100% 处的颜色
                    }],
                    global: false // 默认为 false
                }

径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变

color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    global: false // 缺省为 false
}

纹理填充

color: {
    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
    repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

一些配置项

1.折线图平滑曲线：

smooth:true

2.折线图点样式

symbol:'rect/triangle/cirle/...' //点的样式 none为不显示
symbolSize:5 //点的大小

3.折线图面积

areaStyle:{
    opacity:0.8,
    color:'red'
}

4.标记点，标记行,标记区域

markPoint:{
    symbolSize:10,
   	itemStyle:{
            color:'red'
    }
    data:[
        {
            type:'max',
            name:'最大值'
        },
        {
            type:'min',
            name:'最小值'
        },
        {	//指定坐标
            coord:[1,10]
        }
    ]
},
markLine{
    lineStyle:{
        color:'red'
    },
        data:[{
            name:'start'
            coord:[0,1],
            label:'标记线'
        },
             {
              	name:'end',
                coord:[3,1]
             }，
             {	//标记第一列
                 xAxis:1
             }]
},

markArea:{
    itemStyle:{
        color:'red'
    },
        data:[
            [
                {name:'area1',xAxis:0},
                {xAxis:1}
            ],
            [
                {name:'area2',xAxis:5},
                {xAxis:6}
            ]
        ]
}

5.数据过滤

transform:{
    id:'dataset_since_2015_china'
    type:'filter',
    config:{
        and:[//交集    or/not  
            {	//年份大于等于2015
                dimension:'Year',
                gte:2015
            },
            {	
                //国家为中国
                dimension:'Country'
                '=':'China'
            }
        ]
    }
}
//引用transform
series:{
    ....	
    datasetId:'dataset_since_2015_china'
    ....
}

6.visualmap渐变

visualMap:[
    {	
        //侧边颜色指示框
        show:fasle,
        //设置为连续型
        type:'continuous',
        //选择第一个series
        seriesIndex:0,
        //渐变值从0-400
        min:0,
        max:400
    }，
    {
        show: false,
        type: 'continuous',
        seriesIndex: 1,
    	//x轴
        dimension: 0,
        min: 0,
        max: dateList.length - 1
    }
]

7.区域缩放dataZoom

dataZoom:[
    {
        type:'inside',
        start:0,
        end:10
    },{
        start:0,
        end:10
    }
]

8.visualMap碎片式样式

visualMap:{
    show:false,
        //x轴
    dimension:0,
    pieces:[
        {
            lte:6,
            color:'red'
        },
        {
            gt:6,
            color:'blue'
        }
        //小于等于6的颜色为红色，大于6的颜色为蓝色
    ]
}

9.tooltip

tooltip:{
    //轴线触发
    trigger:'axis',
    axisPointer:{
        //十字
        type:'cross' //shadow阴影
        //数据格式化
        formatter:'{a},{b},{c},{d}'
    }
}

10.轴线配置

//刻度线
axisTick:{
    show:true,
        //和标签对齐
    alignWithLabel:true
}
//轴线
axisLine:{
    //是否从0开始,默认从0开始
    onZero:false,
        //轴线样式
    lineStyle:{
        color:'red'
    }
}
// tooltip触发axis时配置
axisPointer:{
    label:{
        //标签数据格式化
        formatter:params=>{
            return '降水量  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
        }
    }
}

11.阶梯折线图

series:{
    ...
    type:'line'
    step:'start/middle/line' 
    ...
}

12.柱状图背景色

series:{
    ...
    type:'bar',
    showBackground:true,
    backgroundStyle:{
        color:'red'
    }
    ...
}

13.series标签配置

series:{
    ...
    label:{
        show:true,
        position:'top'
    	....
    
    
    }
    ...
}

14.堆叠

series:{
    stack:'stack' //stack值相同时堆叠
}

15.富文本rich

//轴线标签配置项
axisLabel:{
    formatter:function(value){
        //value为标签的值
        return '{' + value + '| }\n{value|' + value + '}';
    },
    rich:{
        value:{
            //富文本样式
            lineHeight:30，
            align:'center'
        },
        value:{
            height:40,
            align:'center',
            backgroundColor:{
                image:'/....' //图片地址
            }    
        }
    }
}

16.legend选择器

legend:{
    left:'center',
    data:['data1','data2','data3'],
    selected:{
        //是否选择，默认为true
        'data1':false,
        
    }
}

17.visualmap颜色映射

visualMap:{
    //水平方向
    orient:'horizontal',
    //水平居中
    left:'center',
    //映射数据范围
    min:0,
    max:100,
    //选择数据映射
   	dimension:0,
        //配置映射颜色
    inRange:{
        color:['red','yellow','blue']
    }
}

dataset与transform数据过滤

dataset

首先dataset是从echarts4之后才有的，之前数据只能生命在各个系列中.

dataset可以单独声明数据

例子

option={
    ...
    dataset:{
        source: [
             //第一行的数据默认为维度名，第二行开始才是数据
    //如果想让第一行就是数据，那么可以设置dataset.sourceHeader:false
    //默认第一列映射到category轴
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
    },
   
    xAxis:{
        type:'category'
    },
    yXis:{}
    //source的维度会自动按列映射到series中，也可以设置
    //seriesLayoutBy：'row' 按行映射
    series:[
        {
    	//seriesLayoutBy:'row'
            type:'bar'
    	//可以直接使用encode指定x轴和y轴的数据
    	encode:{
    		x:'product',
    		y:'2015'
		}
        },
         {
            type:'bar'
        }, {
            type:'bar'
        },
    ]
    ...
}

encode支持的属性：

// 在任何坐标系和系列中，都支持：
encode: {
    // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示
    tooltip: ['product', 'score']
    // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）
    seriesName: [1, 3],
    // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。
    itemId: 2,
    // 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。
    itemName: 3
}

// 直角坐标系（grid/cartesian）特有的属性：
encode: {
    // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：
    x: [1, 5, 'score'],
    // 把“维度0”映射到 Y 轴。
    y: 0
}

// 单轴（singleAxis）特有的属性：
encode: {
    single: 3
}

// 极坐标系（polar）特有的属性：
encode: {
    radius: 3,
    angle: 2
}

// 地理坐标系（geo）特有的属性：
encode: {
    lng: 3,
    lat: 2
}

// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：
encode: {
    value: 3
}

transform

dataset.transform是echarts5开始支持的一种数据转换的功能,

抽象地来说，数据转换是这样一种公式：outData = f(inputData)。f 是转换方法，例如：filter、sort、regression、boxplot、cluster、aggregate(todo) 等等。有了数据转换能力后，我们就至少可以做到这些事情：

• 把数据分成多份用不同的饼图展现。
• 进行一些数据统计运算，并展示结果。
• 用某些数据可视化算法处理数据，并展示结果。
• 数据排序。
• 去除或直选择数据项。

option={
    dataset:[
        //datasetIndex=0
        {source: [
            ['Product', 'Sales', 'Price', 'Year'],
            ['Cake', 123, 32, 2011],
            ['Cereal', 231, 14, 2011],
            ['Tofu', 235, 5, 2011],
            ['Dumpling', 341, 25, 2011],
            ['Biscuit', 122, 29, 2011],
            ['Cake', 143, 30, 2012],
            ['Cereal', 201, 19, 2012],
            ['Tofu', 255, 7, 2012],
            ['Dumpling', 241, 27, 2012],
            ['Biscuit', 102, 34, 2012],
            ['Cake', 153, 28, 2013],
            ['Cereal', 181, 21, 2013],
            ['Tofu', 395, 4, 2013],
            ['Dumpling', 281, 31, 2013],
            ['Biscuit', 92, 39, 2013],
            ['Cake', 223, 29, 2014],
            ['Cereal', 211, 17, 2014],
            ['Tofu', 345, 3, 2014],
            ['Dumpling', 211, 35, 2014],
            ['Biscuit', 72, 24, 2014],
        ],},
       	{
           transform:{
               //过滤操作
               type:'filter',
               //config下可以设置多个规则,and/or/not
               config:{
                   //dimension选择维度
                   //维度为Year，值=2011的数据
                   and:[{dimension:'Year','=':2011}
                        //维度为sales，值大于100的数据
                       {dimesion:'sales',gt:100}
                       ]
               //最后取交集
               },
                  
           } 
        }
        
    ],
    series:[
        {
            type:'pie'
        },
          {
            type:'pie'
        },
          {
            type:'pie'
        },
    ]
}

常见的对象数组格式：

option={
    ...
    dataset:{
           // 用 dimensions 指定了维度的顺序。直角坐标系中，
        // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
        // 如果不指定 dimensions，也可以通过指定 series.encode
             dimensions: ['product', '2015', '2016', '2017'],
        source: [
            {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
            {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
            {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
            {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
        ]
    }
    
    ...
}

动态排序

1.首先开启图表的实时排序

series:{
    ...
    realTimesort:true
    ...
}
//默认升序
//降序可对具体的坐标轴进行inverse:true 的翻转操作

2.设置图表的动画时长

option={
    ...
    //初始图表的动画时长
    animationDuration:0,
    //更新图表时动画时长
    animationDurationUpdate:3000
    // 初始动画的缓效果 
    animationEasing: 'linear',
    animationEasingUpdate: 'linear',
    ...
}

3.设置x轴或y轴的动画时长

xAxis/yAxis:{
    ...
          // 倒序
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300
    ...
}

4.定时更新数据

setInterVal(()=>{
    update()
},3000)

时间轴更新数据

时间轴使用需要多个option，用来实现切换。

1.首先配置baseOption和options

option={
    baseOption:{
        xAxis:{
            ...
        },
        yAxis:{
            ...
        }
  		...
        series:{
            ...
            //data可以暂时不写
        }
    },
    options[{
        series:{
        data:[...]
    },
    {
        series:{
        data:[...]
    },
              {
        series:{
        data:[...]
    },
    {
        series:{
        data:[...]
    },
    ]
}

2.在baseOption中配置timeline

baseOption:{
    ...
    timeline:{
         axisType: 'category',
         //是否自动播放
         autoPlay: true,
         //播放时间间隔
         playInterval: 1000,
         //时间轴数据
         data: ['time1', 'time2', 'time3', 'time4', 'time5']
    }
    ...
}

极坐标系

1.首先和直角坐标系不同的是，极坐标系需要配置 angleAxis ,radiusAxis,polar属性而不用xAxis，yAxis。

option={
    ...
    //上图的value
    angleAxis:{
        axisTick:{
            show:false
        },
        //分割线
        splitLine:{
            show:true
        }
    },
    // 上图的category
    radiusAxis:{
        type: 'category',
            data: ['周一', '周二', '周三', '周四'],
            z: 10,
            axisTick: {
                show: false
            }
    },
    //定义此坐标系为polar
    polar:{}
    ...
}

2.然后需要在series中生命用的是polar极坐标系

series:{
    ...
    //默认为cartesian2d，也就是直角坐标系，极坐标系需要声明
    coordinateSystem:'polar'
    //指定相应的极坐标组件
    porlarIndex:0
    ...
}