精华内容
下载资源
问答
  • ECharts数据可视化

    千次阅读 2019-08-04 14:52:45
  • echarts数据可视化

    2021-03-01 11:06:51
    熟悉echarts数据可视化的使用方法 实现原理 echarts是百度开发的前端可视化类库,现在已经成为Apache软件基金会的顶级项目,在可视化领域使用广泛。本实验主要介绍echarts的基本使用,并生成一些简答的图表。 通常会...

    实现目的

    熟悉echarts数据可视化的使用方法

    实现原理

    echarts是百度开发的前端可视化类库,现在已经成为Apache软件基金会的顶级项目,在可视化领域使用广泛。本实验主要介绍echarts的基本使用,并生成一些简答的图表。
    通常会先将echarts下载下来,在本地导入使用,但百度也提供了一个页面调试工具供我们开发使用,我们可以现在echarts的在线调试页面进行调试,调试完成之后在我们的本地使用。
    echart的官网是https://echarts.apache.org/examples/zh/index.html
    echarts官网为我们提供了大量的实例供我们参考使用。

    实验环境

    IE9 以上或Firefox或Chrome(推荐)等浏览器、Notepad++等编辑工具。echarts.js库。

    实验步骤

    实验一:利用在线调试工具制作简单的折线图

    进入echarts的官方实力网站
    在这里插入图片描述
    点击基础折线图就进入了在线调试页面
    在这里插入图片描述
    左边为响应的js代码,右边为绘制出的折线图,修改js代码,观看右边有何变化
    在这里插入图片描述
    在这里插入图片描述

    实验二:本地利用echarts绘制柱状图

    制作一个柱状图

    将echarts下载到本地
    1.解压压缩包

    链接:https://pan.baidu.com/s/1hr0ayv3OwIdzlklVaBiygw
    提取码:vdbj

    2.在本地新建一个文件夹demo
    3.在demo文件夹中新建一个文件夹js
    4.将解压缩文件中dist目录下找到以下两个文件复制到js 文件夹中

    5.在js文件夹中新建一个hh.html(可以随便命名),并引入echarts脚本
    例一:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <!-- 引入 echarts.js -->
        <script src="echarts.min.js"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    </html>
    

    6.点击hh.html,得到的结果如下:
    在这里插入图片描述
    例二:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .box{height:800px;width:600px;}
        </style>
    </head>
    
    <body>
        <div id="main" class="box"></div>
        <script src="echarts.min.js"></script>
    
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            myChart.setOption({
                title: {
                show: true,
                text: "网站访问量统计",
            },
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                    type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    name: "网站访问量"
                }
            ],
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    barWidth: '60%',
                    data:[10, 52, 200, 334, 390, 330, 220]
                }
            ]
            })
        </script>
    </body>
    
    

    得到的结果如下:
    在这里插入图片描述

    展开全文
  • echarts数据可视化作业

    2021-01-14 11:44:09
    echarts数据可视化 作业案例,js,html,css 帮助同学们更好的理解echarts 数据可视化 各个图表都做了案例
  • Echarts数据可视化

    2021-03-24 15:28:48
    什么是数据可视化 数据可视化主要目的:... ECharts.js 百度出品的一个开源 Javascript 数据可视化库 Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用 AntV 蚂蚁金服全新一代数据可视化

    什么是数据可视化

    数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息。

    数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。
    在这里插入图片描述

    数据可视化的场景

    在这里插入图片描述

    常见的数据可视化库

    D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)

    ECharts.js 百度出品的一个开源 Javascript 数据可视化库

    Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用

    AntV 蚂蚁金服全新一代数据可视化解决方案 等等

    Highcharts 和 Echarts 就像是 Office 和 WPS 的关系
    

    ECharts

    ECharts是一个使用 JavaScript 实现的开源可视化库

    可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)

    底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

    官网地址:https://www.echartsjs.com/zh/index.html

    Echarts优点

    丰富的可视化类型
    多种数据格式支持
    流数据的支持
    移动端优化
    跨平台使用
    绚丽的特效
    详细的文档说明

    ECharts的基本使用

    步骤1:下载并引入echarts.js文件—图表依赖这个js库

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

    步骤2:准备一个具备大小的DOM容器—生成的图表会放入这个容器内

    <div id="main" style="width: 600px;height:400px;background-color: #ccc;"></div>
    

    步骤3:初始化echarts实例对象—实例化echarts对象

    var myChart = echarts.init(document.querySelector('#main'));
    

    步骤4:指定配置项和数据(option)—根据具体需求修改配置选项

    var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 106, 10, 10, 20]
                }]
            };
    

    步骤5:将配置项设置给echarts实例对象—让echarts对象根据修改好的配置生效

    myChart.setOption(option);
    

    选择不同类型图表

    官网-示例-引用

    相关配置讲解

    title:标题组件

    title: {
            text: '折线图堆叠'
        },   
    

    tooltip:提示框组件

    tooltip: {
            trigger: 'axis'
        },
    

    legend:图例组件

    legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
    

    toolbox: 工具栏

    toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
    

    grid:直角坐标系内绘图网格

    grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
    

    xAxis:直角坐标系 grid 中的 x 轴

    xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
    

    yAxis:直角坐标系 grid 中的 y 轴

    yAxis: {
            type: 'value'
        },
    

    series: 系列列表。
    color:调色盘颜色列表

    了解以上9个配置的作用,其余配置还有具体细节查阅文档:

    文档菜单—配置项手册学echarts关键在于学会查阅文档,根据需求修改配置
    
    series: 系列列表

    type: 类型 (什么类型的图表) 比如 line 是折线 bar 柱形等

    name: 系列名称,用于tooltip的显示,legend 的图例筛选 变化

    stack: 数据堆叠。 如果设置相同值,则会数据堆叠。

    数据堆叠:    第二个数据值=  第一个数据值 +  第二个数据值 
                 第三个数据值 =  第二个数据值 +  第三个数据值….  依次叠加
    

    如果给stack 指定不同值或者去掉这个属性则不会发生数据堆叠

    series: [
            {
                name: '邮件营销',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '联盟广告',
                type: 'line',
                stack: '总量',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '视频广告',
                type: 'line',
                stack: '总量',
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '直接访问',
                type: 'line',
                stack: '总量',
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: '搜索引擎',
                type: 'line',
                stack: '总量',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    

    在这里插入图片描述

    展开全文
  • echarts数据可视化展板

    2021-02-25 18:33:19
    echarts数据可视化展板
  • Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解点击进入其他功能详解: Echarts数据可视化title详解 Echarts数据可视化tooltip详解 Echarts数据可视化toolbox详解 Echarts数据可视化...
    
        ad1.jpg
    

    全栈工程师开发手册 (作者:栾鹏)

    Echarts数据可视化开发代码注释全解
    Echarts数据可视化开发参数配置全解

    6大公共组件详解(点击进入):
    title详解tooltip详解toolbox详解legend详解dataZoom详解visualMap全解

    5大坐标系详解(点击进入):
    地理坐标系geo详解grid直角坐标系(xAxis、yAxis)详解parallel平行坐标系详解polar极坐标系详解radar雷达坐标系详解

    19种图表类型详解(点击进入,待续):
    series-bar柱形图详解series-effectscatter特效散点图series-graph关系图series-heatmap热力图series-line线图series-map地图series-pie饼图series-radar雷达图series-scatter散点图

    图表行为和图表事件:
    action图表行为event图表事件

    Echarts数据可视化series-scatter散点图全解:

    mytextStyle={
        color:"#333",               //文字颜色
        fontStyle:"normal",         //italic斜体  oblique倾斜
        fontWeight:"normal",        //文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
        fontFamily:"sans-serif",    //字体系列
        fontSize:18,                  //字体大小
    };
    mylineStyle={
        color:"#333",               //颜色,'rgb(128, 128, 128)','rgba(128, 128, 128, 0.5)',支持线性渐变,径向渐变,纹理填充
        shadowColor:"red",          //阴影颜色
        shadowOffsetX:0,            //阴影水平方向上的偏移距离。
        shadowOffsetY:0,            //阴影垂直方向上的偏移距离
        shadowBlur:10,              //图形阴影的模糊大小。
        type:"solid",               //坐标轴线线的类型,solid,dashed,dotted
        width:1,                    //坐标轴线线宽
        opacity:1,                  //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形
    };
    myareaStyle={
        color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
        shadowColor:"red",          //阴影颜色
        shadowOffsetX:0,            //阴影水平方向上的偏移距离。
        shadowOffsetY:0,            //阴影垂直方向上的偏移距离
        shadowBlur:10,              //图形阴影的模糊大小。
        opacity:1,                  //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形
    };
    myitemStyle={
        color:"red",                 //颜色
        borderColor:"#000",         //边框颜色
        borderWidth:0,              //柱条的描边宽度,默认不描边。
        borderType:"solid",         //柱条的描边类型,默认为实线,支持 'dashed', 'dotted'。
        barBorderRadius:0,          //柱形边框圆角半径,单位px,支持传入数组分别指定柱形4个圆角半径。
        shadowBlur:10,              //图形阴影的模糊大小。
        shadowColor:"#000",         //阴影颜色
        shadowOffsetX:0,            //阴影水平方向上的偏移距离。
        shadowOffsetY:0,            //阴影垂直方向上的偏移距离。
        opacity:1,                  //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
    };
    mylabel={
        show:false,                  //是否显示标签。
        position:"inside",          //标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
        offset:[30, 40],             //是否对文字进行偏移。默认不偏移。例如:[30, 40] 表示文字在横向上偏移 30,纵向上偏移 40。
        formatter:'{b}: {c}',       //标签内容格式器。模板变量有 {a}、{b}、{c},分别表示系列名,数据名,数据值。
        textStyle:mytextStyle
    };
    mypoint={
        symbol:"pin",               //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        symbolSize:50,              //标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
        symbolRotate:0,             //标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
        symbolOffset:[0,0],         //标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置
        silent:false,               //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
        label:{
            normal:mylabel,
            emphasis:mylabel
        },
        itemStyle:{
            normal:myitemStyle,
            emphasis:myitemStyle
        }
    };
    myline={
        symbol:["pin","circle"],    //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        symbolSize:50,              //标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
        precision:2,                //标线数值的精度,在显示平均值线的时候有用。
        silent:false,               //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
        label:{
            normal:mylabel,
            emphasis:mylabel
        },
        lineStyle:{
            normal:mylineStyle,
            emphasis:mylineStyle
        }
    };
    myarea={
        silent:false,               //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
        label:{
            normal:mylabel,
            emphasis:mylabel
        },
        itemStyle:{
            normal:myitemStyle,
            emphasis:myitemStyle
        }
    };
    series=[
    {
        type:"scatter",             //散点图
        zlevel:0,                   //柱状图所有图形的 zlevel 值。
        z:2,                         //柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
        silent:false,               //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
        name:"数据名称",             //系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
        legendHoverLink:true,       //是否启用图例 hover 时的联动高亮。
        hoverAnimation:true,        //是否开启鼠标 hover 的提示动画效果。
        coordinateSystem:"geo",     //'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
        xAxisIndex:0,                //使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
        yAxisIndex:0,                //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
        polarIndex:0,                //使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。
        geoIndex:0,                  //使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。
        calendarIndex:0,            //使用的日历坐标系的 index,在单个图表实例中存在多个日历坐标系的时候有用。
        symbol:"pin",               //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        symbolSize:50,              //标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
        symbolRotate:0,             //标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
        symbolOffset:[0,0],         //标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置
        large:false,                //是否开启大规模散点图的优化,在数据图形特别多的时候(>=5k)可以开启。开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。缺点:优化后不能自定义设置单个数据项的样式。
        largeThreshold:2000,        //开启绘制优化的阈值。
        cursor:"pointer",           //鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
        label:{                      //图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,
            normal:mylabel,
            emphasis:mylabel
        },
        itemStyle:{                 //图形样式,normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
            normal:myitemStyle,
            emphasis:myitemStyle,
        },
        encode: {                    //可以定义 data 的哪个维度被编码成什么
            x: [3, 1, 5],             // 表示维度 3、1、5 映射到 x 轴。
            y: 2,                     // 表示维度 2 映射到 y 轴。
            tooltip: [3, 2, 4],      // 表示维度 3、2、4 会在 tooltip 中显示。
            label: 3                 // 表示 label 使用维度 3。
        },
        data: [                      //每一列称为一个『维度』。维度下标从0开始
            [12, 44, 55, 66, 2],
            [23, 6, 16, 23, 1],
            [12, 44, 55, 66, 2],
            [23, 6, 16, 23, 1],
            [12, 44, 55, 66, 2],
            [23, 6, 16, 23, 1],
        ],
        //markPoint:同bar
        //markLine:同bar
        //markArea:同bar
        tooltip:tooltip  //index.js
    },
    
    ];
    
    展开全文
  • Echarts 数据可视化

    2020-12-22 16:46:13
    Echarts 缩写来自 Enterprise Charts(商业级数据图表),是百度的一个开源的数据可视化工具 Echarts 能够绘制 2D 和 3D 的饼状图、柱状图、折线图等几乎所有我们能够见到的图形 Echarts 能够在 PC 端和移动设备上...
  • Echarts数据可视化全解

    千次阅读 2017-08-18 12:43:39
    Echarts数据可视化开发全解 http://blog.csdn.net/luanpeng825485697/article/details/771988586大公共组件:Echarts数据可视化visualMap全解 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,080
精华内容 2,032
关键字:

echarts数据可视化