数据可视化

最新推荐文章于 2022-09-17 22:53:35 发布

原创最新推荐文章于 2022-09-17 22:53:35 发布 · 676 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

本文介绍了数据可视化的概念，并详细探讨了HTML5中的canvas和SVG元素，包括如何绘制线段、矩形、圆形等。同时，文章还深入讲解了ECharts这个JavaScript图表库的使用，包括基本概念、新特性和组件。通过对canvas、SVG和ECharts的学习，读者可以更好地理解和实现数据可视化。

数据可视化简单理解，就是将数据转换成易于人辨识和理解的视觉表现形式，如各种2D图表、3D图表、地图、矢量图等等

数据可视化解决方案

Highcharts、EChart、AntV、three.js、zrender、d3、Canvas、Svg、WebGL、HTML、Chrome、Skia、OpenGL

canvas

canvas是HTML5的新特性，它允许我们使用canvas元素在网页上通过js绘制图像

canvas标签

canvas标签只是图形容器，相当于一个画布，canvas元素本身是没有绘图能力的。所有绘制工作必须在js内部完成，相当于使用画笔在画布上画画

注意：

1、必须指定宽高（默认宽为300，高为150）

2、浏览器认为canvas标签是一张图片（可以右键保存图片）

3、给canvas画布添加文本内容或子节点没有意义（浏览器中不会显示）

4、操作canvas画布：画布当中绘制图形、显示文字，都必须通过js完成

5、canvas标签的宽和高务必通过canvas标签属性width|height设置（不能通过样式设置canvas的宽高）

<canvas width:"800" height="400"></canvas>

操作canvas

canvas标签任何操作务必通过js完成，通过js中的“笔”来完成

getContext是canvas的一个方法

let canvas = document.querySelector('canvas')
//获取画布的笔【上下文】
let ctx = canvas.getContext('2d')

绘制线段

canvas的坐标系左上角为(0,0)

let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
//线段起点
ctx.moveTo(100,100)
//其他点（可以有多个，起点会先连接先写的其他点）
ctx.lineTo(100,200)
ctx.lineTo(200,100)
//设置图形填充的颜色(需在绘制前调用)
ctx.fillStyle = "red"
ctx.fill()
//设置线段的颜色(需在绘制前调用)
ctx.strokeStyle = 'purple'
//设置线段的宽度(需在绘制前调用)
ctx.lineWidth = '20'
//将起点和最后一个点连接在一起(需在绘制前调用)
ctx.closePath()
//写完点后需调用stroke方法来绘制线段
ctx.stroke()

绘制矩形

方法一：

let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')

//绘制矩形
ctx.strokeRect(100,200,100,200)
//第一个参数为矩形距离x轴的距离
//第二个参数为矩形距离y轴的距离
//第三个参数为矩形的宽
//第四个参数为矩形的高
//总结：四个参数分别为x、y、w、h

注意：这种方法不能设置填充颜色！

方法二：带有填充颜色的矩形（默认为黑色）

let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')

//设置图形填充的颜色
ctx.fillStyle = "red"
ctx.fill()
//绘制矩形
ctx.fillRect(200,200,100,200)//四个参数与方法一相同

绘制圆形

arc(x,y,radius,starAngle,endAngle,anticlockwise)

x：圆心的x坐标（距离x轴距离）

y：圆心的y坐标（距离y轴距离）

radius：半径

starAngle：开始角度

endAngle：结束角度

anticlockwise：是否逆时针（true）或顺时针（false）

360° = 2PI

let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')

//绘制圆形（开始绘制）
ctx.beginPath();
//绘制圆形的方法
ctx.arc(100,100,50,0,2 * Math.PI,true)
//设置图形填充的颜色
ctx.fillStyle = "red"
ctx.fill()
//绘制圆形（结束）
ctx.stroke()

清除画布

将画布中所有绘制的图形清除

let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')

//绘制矩形
ctx.fillRect(100,200,100,200)
//清除画布
ctx.clearRect(100,200,100,100)
//四个参数分别为x、y、w、h。代表需要清除的区域

绘制文字

let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')

//设置文字样式
ctx.font('20px 微软雅黑')
//设置文字颜色
ctx.fillStyle = 'red'
//绘制文字
ctx.fillText('文字',50,50)
//参数分别为：文本内容，文本x轴位置，文本y轴位置

svg

svg是基于XML的图像文件格式。全称为Scalable Vector Graphics，意为可缩放的矢量图形

注意：

1、在html中就是标签（双闭合标签）

2、默认宽高为300x150

3、svg绘制图形务必在svg标签内部

基本的SVG元素

<svg></svg>：包裹并定义整个矢量图。

<line>：创建一条直线

<svg>
    <line x1="" y1="" x2="" y2="" stroke="red"></line>
</svg>
<!-- 必选属性：
    x1，y1：代表第一个点的坐标
    x2，y2：代表第二个点的坐标
    stroke：绘制直线，值为直线的颜色
     可选属性：
    stroke-width="20"：设置直线的宽度
-->

<polyline>：创建折线（默认填充）

<svg>
    <polyline points="50 50,100 100,200 200"></polyline>
</svg>
<!-- 绘制折线的三种方法（可绘制多个点：如x4 y4 x5 y5....）：
1：<polyline points="x1 y1,x2 y2,x3 y3"></polyline>
2:<polyline points="
    x1 y1
    x2 y2
    x3 y3">
  </polyline>
3:<polyline points="x1 y1 x2 y2 x3 y3"></polyline>

            可选属性：
fill-opacity="0"：设置填充颜色透明度（如果为0会将整个折线与填充变透明，所以需搭配stroke使用）
stroke="red"：绘制折线并设置颜色
-->

<rect>：创建矩形

<svg>
    <rect x="400" y="400" width="150" height="50" fill="pink"></rect>
</svg>
<!--
    fill：设置填充颜色
-->

<circle>：创建圆

<svg>
    <circle cx="70" cy="95" r="50" style="stroke:cyan;fill:none"></circle>
</svg>
<!--
    cx，cy：圆心点坐标
    r：半径
    style：设置样式
-->

<ellipse>：创建圆和椭圆

<svg>
    <ellipse cx="70" cy="95" rx="50" ry="60" style="stroke:cyan;fill:none"></ellipse>
</svg>
<!--
    cx，cy：圆心点坐标
    rx，ry：x轴和y轴半径
-->

<polygon>：创建多边形（默认填充）

<svg>
    <polygon points="600 100,300 400,750 100" stroke="red" fill-opacity="0"></polygon>
</svg>

<path>：通过指定点以及点和点之间的线来创建任意形状（默认填充）

<svg>
    <path d="
             M x1 y1
             L x3 y3
             L x4 y4
             L x5 y5
             Z x6 y6"></path>
</svg>
<!-- 
    M：移动到初始位置
    L：画线
    Z：将结束和开始闭合
-->

Echarts

是一个基于js的开源可视化图标库，用来开发数据可视化

基本使用

官网：Apache ECharts

1、引入Echarts（bootcdn）

2、准备一个容器（div）

<div></div>

<script>
    let a = document.querySelector('div')
    //创建Echarts实例
    let myecharts = echarts.init(a)
    //指定图表的配置项和数据（配置项在官网查看）
    myecharts.setOption({
        //图标的标题
        titel:{
            //主标题的设置
            text:'标题'
            //子标题的设置
            subtext:'子标题'
        }
        //x轴配置项
        xAxis:{
        //x轴数据
            data:[]
        }
        //y轴配置项
        yAxis:{
            //显示y轴的线
            axisLine:{
                show:true
            },
            //显示y轴刻度
            axisTick:{
                show:true
            }
        }
        //系列的设置：绘制什么样式的图表、数据的展示在这里设置
        series:[
            {
                //图标类型的设置
                //bar：柱状图 line：折线图 pie：饼图
                type:'bar'
                //图标的数据
                data:[10,20,30]
                //设置颜色
                color:'red'
            }
        ]
    })
</script>

展示多个图表：

1、多个容器展示多个图表

如果需要多个图表，需要再准备一个容器，创建echars实例。如：

<div class="box1"></div>
<div class="box2"></div>
<script>
    let a = document.querySelector('.box1')
    let b = document.querySelector('.box2')
    //创建Echarts实例
    let myecharts1 = echarts.init(a)
    let myecharts2 = echarts.init(b)
    //指定图表的配置项和数据（配置项在官网查看）
    myecharts1.setOption({
    })
    myecharts2.setOption({
    })
</script>

2、一个容器展示多个图表

在series（系列）中设置，会在一个坐标系中展示

<div></div>

<script>
    let a = document.querySelector('div')
    //创建Echarts实例
    let myecharts = echarts.init(a)
    //指定图表的配置项和数据（配置项在官网查看）
    myecharts.setOption({
        //图标的标题
        titel:{
            //主标题的设置
            text:'标题'
            //子标题的设置
            subtext:'子标题'
        }
        //x轴配置项
        xAxis:{
        //x轴数据
            data:[]
        }
        //y轴配置项
        yAxis:{}
        //系列的设置：绘制什么样式的图表、数据的展示在这里设置
        series:[
            {
                //图标类型的设置
                //bar：柱状图 line：折线图 pie：饼图
                type:'bar'
                //图标的数据
                data:[10,20,30]
                //设置颜色
                color:'red'
            },
            {
                type:'line'
                data:[10,20,30]
            }    
        ]
    })
</script>

4.0新特性：dataset

dataset：数据集，将数据放在一个二维数组中，调用时在series的encode中调用。如：

<div></div>

<script>
    let a = document.querySelector('div')
    let myecharts = echarts.init(a)
    //声明数据：二维数组
    let data = [
        ['衣服',10,22,'x',10],
        ['直播',12,55,'y',50],
        ['游戏',16,44,'z',60],
        ['电影',19,32,'t',70],
    ]
    myecharts.setOption({
        series:[
            ...
            {
                type:'bar'
                //data:[10,20,30],因为数据在外面声明，所以不需要使用data
                color:'red'
                //调用数组
                encode:{
                        //决定y轴使用数组的数据：值为索引值
                        y:1
            }
            },
            {
                type:'pie'
                //data:[10,20,30]
            encode:{
                        //决定柄图旁边的文字：值为索引值
                        itemName:3
                        //决定柄图的值：值为索引值
                        value:4
            }
            }    
        ]
    })
</script>

Echarts基本概念：组件

Echarts中除了绘图之外的其他部分，都可抽象为组件

<div></div>

<script>
    let a = document.querySelector('div')
    let myecharts = echarts.init(a)
    myecharts.setOption({
        ...
        series:[
            {
                //起名字
                name:'柱状图'
                type:'bar'
                data:[10,20,30],
            },
            {
                //起名字
                name:'折线图'
                type:'pie'
                data:[10,20,30]
            }    
        ]
        //提示组件（鼠标放在柱状图或折线图上会有提示）
        tooltip:{
            //提示框文字颜色
            textStyle:{
                color:'red'
            }
        }
        //系列切换组件（点击显示某一个系列图）
        legend:{
            data:['柱状图','折线图']
        }
    })
</script>

Echarts基本概念：坐标系

散点图(scatter)、双坐标（拥有两个y轴）

<div></div>

<script>
    let a = document.querySelector('div')
    let myecharts = echarts.init(a)
    myecharts.setOption({
        ...
        yAxis:[
            {
                axisLine:{
                    show:true
                },
                axisTick:{
                    show:true
                }
            },
            {
                axisLine:{
                    show:true
                },
                axisTick:{
                    show:true
                }
            }
        ]
        series:[
            {
                type:'bar'
                data:[10,20,30],
                //代表当前图标使用第几个y轴
                yAxusIndex:0
            },
            {
                type:'pie'
                data:[10,20,30]
                //代表当前图标使用第几个y轴
                yAxusIndex:1
                        }    
        ]
    })
</script>