您的位置:首页 > 其它

ECharts学习笔记

2021-05-25 21:14 127 查看

数据可视化

数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息。
数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。

常见的数据可视化库:

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

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

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

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

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

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

大白话:

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

ECharts入门

ECharts初体验

ECharts入门教程整理来自于B站的UP主

使用步骤:

1、引入echarts 插件文件到html页面中

选择合适版本进行下载

然后引入

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

2、准备一个具备大小的DOM容器

基本语法:

<div id="main" style="width: 600px;height:400px;"></div>
<!-- 必须要有宽度和高度 -->

示例:

3、初始化echarts实例对象

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

4、指定配置项和数据(option)

var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};

5、将配置项设置给echarts实例对象

myChart.setOption(option);

完整实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据可视化-ECharts</title>
<style type="text/css">
.echarts-box {
widows: 400px;
height: 400px;
background-color: #B3D8FF;
}
</style>
</head>
<body>
<!-- 1.准备一个带长度和宽度的盒子 -->
<div class="echarts-box"></div>
<!-- 2.引入echarts.js -->
<script src="js/echarts.min.js"></script>
<script>
/* 3.初始化实例对象,语法:echarts.init(dom容器) */
var myChart = echarts.init(document.querySelector(".echarts-box"));
/* 4.指定配置项和数据 */
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>

浏览器查看结果

ECharts常用基础配置

各配置介绍如下:

  • title:设置图表的标题
  • tooltip:图表的提示框组件。其中trigger表示触发方式。
  • legend:图例组件,提示图表中线代表着什么。
  • toolbox:工具箱组件,可以另存为图片等功能。
  • color:调色盘颜色列表,设置线条的演示,后面跟个数组,设置每条线的颜色。
  • grid:网格配置。控制柱状图等图表的大小。 left:图表距离左侧DOM容器的。
  • right:距离右侧DOM容器。
  • bottom:距离下侧DOM容器。
  • containLabel:是否显示刻度标签,如果为true就显示,否则就不显示。
  • xAxis:设置x轴的相关配置
      type:可以是category、value等。可以设置使数据横轴显示或纵轴显示
    • boundaryGap:是否让我们的线条和坐标轴有缝隙。
    • data:x轴显示的相关信息。
  • yAxis:设置y轴的相关配置
  • series:系列图表配置,决定着显示那种类型的图表。是一个数组,数组里面存放着对象,每一个对象代表一条数据。
      stack:数据堆叠,同个类目轴上系列配置相同的
      stack
      值后 后一个系列的值会在前一个系列的值上相加。
    • data:每一条线中的数据,是一个数字数组。
    • type:
    • name:series里面有了name值则legend里面的data值可以删除。

    参考图:

    示例:

    option = {
    // color设置我们线条的颜色 注意后面是个数组
    color: ['pink', 'red', 'green', 'skyblue'],
    // 设置图表的标题
    title: {
    text: '折线图堆叠123'
    },
    // 图表的提示框组件
    tooltip: {
    // 触发方式
    trigger: 'axis'
    },
    // 图例组件
    legend: {
    // series里面有了 name值则 legend里面的data可以删掉
    },
    // 网格配置  grid可以控制线形图 柱状图 图表大小
    grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    // 是否显示刻度标签 如果是true 就显示 否则反之
    containLabel: true
    },
    // 工具箱组件  可以另存为图片等功能
    toolbox: {
    feature: {
    saveAsImage: {}
    }
    },
    // 设置x轴的相关配置
    xAxis: {
    type: 'category',
    // 是否让我们的线条和坐标轴有缝隙
    boundaryGap: false,
    data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    // 设置y轴的相关配置
    yAxis: {
    type: 'value'
    },
    // 系列图表配置 它决定着显示那种类型的图表
    series: [
    {
    name: '邮件营销',
    type: 'line',
    
    data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
    name: '联盟广告',
    type: 'line',
    
    data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
    name: '视频广告',
    type: 'line',
    
    data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
    name: '直接访问',
    type: 'line',
    
    data: [320, 332, 301, 334, 390, 330, 320]
    }
    ]
    };

    效果:

    柱形图

    那么如何来做这个柱形图呢?

    第一步:查看官网类似案例

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中

    复制里面的option配置到本地文件

    option = {
    xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
    type: 'value'
    },
    series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    showBackground: true,
    backgroundStyle: {
    color: 'rgba(220, 220, 220, 0.8)'
    }
    }]
    };

    本地运行

    根据需求定制图表

    • 设置柱状图的大小

    • 改变X轴标签颜色为红色

    • 不显示X轴的样式

    • 设置y轴的文字标签样式

    • 设置y轴的轴线的样式

    • y轴分割线的样式

    • 修改柱形图的柱子宽度和圆角

    • 修改柱状图的工具提示

    • 更换对应数据

    • 图表随屏幕自适应

    完整代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>数据可视化-ECharts</title>
    <style type="text/css">
    .echarts-box {
    width: 400px;
    height: 400px;
    background-color: #B3D8FF;
    }
    </style>
    </head>
    <body>
    <!-- 1.准备一个带长度和宽度的盒子 -->
    <div class="echarts-box"></div>
    <!-- 2.引入echarts.js -->
    <script src="js/echarts.min.js"></script>
    <script>
    /* 3.初始化实例对象,语法:echarts.init(dom容器) */
    var myChart = echarts.init(document.querySelector(".echarts-box"));
    /* 4.指定配置项和数据 */
    var option = {
    // 设置柱状图的颜色
    color: ["#2F89CF"],
    // 设置工具提示
    tooltip: {
    trigger: 'axis',
    axisPointer: {
    // 坐标轴指示器, 坐标轴触发有效
    type: "shadow" // 默认为直线,可选为"line"/"shadow"
    }
    },
    // 设置柱状图的大小
    grid: {
    left: "0%",
    top: "10px",
    right: '0%',
    bottom: "4%",
    containLabel: true
    },
    // X轴的配置
    xAxis: {
    type: 'category',
    data: ['小学生', '初中生', '高中生', '大学生', '研究生', '博士生'],
    axisTick: {
    alignWithLabel: true
    },
    // 修改刻度标签相关样式
    axisLabel: {
    color: 'red',
    fontSize: '12'
    },
    // 显示x坐标轴的样式
    show: true
    },
    // Y轴的配置
    yAxis: {
    type: 'value',
    // y轴文字标签的样式
    axisLabel: {
    color: "rgba(255, 255, 255, 0.6)",
    fontSize: '12'
    },
    // y轴线的样式
    axisLine: {
    lineStyle: {
    color: "rgba(255, 255, 255, 0.6)",
    width: 2,
    }
    },
    // y轴分割线的样式
    splitLine: {
    lineStyle: {
    color: 'rgba(220, 220, 220, 0.8)',
    width: 1
    }
    }
    },
    series: [{
    data: [100, 90, 80, 50, 20, 5],
    type: 'bar',
    showBackground: true,
    backgroundStyle: {
    color: 'rgba(220, 220, 220, 0.8)'
    },
    // 修改柱形图中柱子的宽度
    barWidth: '20%',
    itemStyle: {
    // 修改柱子圆角
    barBorderRadius: 20
    }
    }]
    };
    /* 把配置项给实例对象 */
    myChart.setOption(option);
    /* 让图表跟随屏幕自动的去适应 */
    window.addEventListener("resize", function() {
    myChart.resize();
    })
    </script>
    </body>
    </html>

    水平柱形图

    第一步:查看官网示例

    复制option配置

    option = {
    title: {
    text: '世界人口总量',
    subtext: '数据来自网络'
    },
    tooltip: {
    trigger: 'axis',
    axisPointer: {
    type: 'shadow'
    }
    },
    legend: {
    data: ['2011年', '2012年']
    },
    grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
    },
    xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
    },
    yAxis: {
    type: 'category',
    data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
    },
    series: [
    {
    name: '2011年',
    type: 'bar',
    data: [18203, 23489, 29034, 104970, 131744, 630230]
    },
    {
    name: '2012年',
    type: 'bar',
    data: [19325, 23438, 31000, 121594, 134141, 681807]
    }
    ]
    };

    引入后,运行

    自定义定制

    • 修改图表大小

    • 不显示x轴相关信息

    • 不显示y轴线条和刻度

    • 设置刻度标签的文本颜色

    • 设置嵌套柱形图

    设置成如下图的样式:

    首先将第一组柱子设置样式

    设置数据显示在柱子里面

    不同的柱子设置不同的颜色

    设置两组y轴,将yAxis设置为一个数组,数组是两个对象,分别表示两组y轴。

    完成嵌套柱形图

    完整代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>数据可视化-ECharts</title>
    <style type="text/css">
    .echarts-box {
    width: 400px;
    height: 400px;
    background-color: #B3D8FF;
    }
    </style>
    </head>
    <body>
    <!-- 1.准备一个带长度和宽度的盒子 -->
    <div class="echarts-box"></div>
    <!-- 2.引入echarts.js -->
    <script src="js/echarts.min.js"></script>
    <script>
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    /* 3.初始化实例对象,语法:echarts.init(dom容器) */
    var myChart = echarts.init(document.querySelector(".echarts-box"));
    /* 4.指定配置项和数据 */
    var option = {
    // 修改图表位置
    grid: {
    top: "10%",
    left: "22%",
    bottom: "10%",
    containLabel: true
    },
    title: {
    text: '世界人口总量',
    subtext: '数据来自网络'
    },
    tooltip: {
    trigger: 'axis',
    axisPointer: {
    type: 'shadow'
    }
    },
    legend: {
    data: ['2011年', '2012年']
    },
    // x轴
    xAxis: {
    // 不显示x轴样式
    show: false
    },
    // y轴
    yAxis: [{
    type: 'category',
    data: ['巴西', '印尼', '美国', '印度', '中国'],
    // 不显示y轴线条
    axisLine: {
    show: false
    },
    // 不显示刻度
    axisTick: {
    show: false
    },
    // 把刻度标签里面的文字颜色设置为白色
    axisLabel: {
    color: "#fff"
    }
    },
    {
    data: [702, 350, 610, 793, 664],
    // 不显示y轴线条
    axisLine: {
    show: false
    },
    // 不显示刻度
    axisTick: {
    show: false
    },
    // 把刻度标签里面的文字颜色设置为白色
    axisLabel: {
    color: "#fff"
    }
    }
    ],
    series: [
    // 第一组数据(即第一个柱子)
    {
    name: '条',
    type: 'bar',
    data: [70, 34, 60, 78, 69],
    yAxisIndex: 0,
    // 修改第一组柱子的圆角
    itemStyle: {
    barBorderRadius: 20,
    // 次数的color可以修改柱子的颜色
    // params是传进来的柱子对象
    color: function(params) {
    // console.log(params);
    // dataIndex是当前柱子的索引号
    return myColor[params.dataIndex];
    }
    },
    // 柱子之间的距离
    barCategoryGap: 50,
    // 柱子的宽度
    barWidth: 10,
    // 显示柱子内的文字
    label: {
    show: true,
    position: "inside",
    // {c}会自动解析为数据data里面的数据
    formaater: "{c}%"
    }
    },
    // 第二组数据(即第二个柱子)
    {
    name: '框',
    type: 'bar',
    data: [100, 100, 100, 100, 100],
    yAxisIndex: 1,
    barCategoryGap: 50,
    barWidth: 15,
    itemStyle: {
    color: "none",
    borderColor: "#00C1DE",
    borderWidth: 3,
    barBorderRadius: 15
    }
    }
    ]
    };
    
    /* 把配置项给实例对象 */
    myChart.setOption(option);
    /* 让图表跟随屏幕自动的去适应 */
    window.addEventListener("resize", function() {
    myChart.resize();
    })
    </script>
    </body>
    </html>

    折线图

    第一步:查看官网实例

    复制示例代码:

    option = {
    title: {
    text: '折线图堆叠'
    },
    tooltip: {
    trigger: 'axis'
    },
    legend: {
    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
    },
    toolbox: {
    feature: {
    saveAsImage: {}
    }
    },
    xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
    type: 'value'
    },
    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]
    }
    ]
    };

    第二步:自定义定制

    • 修改折线图大小

    • 修改图例组件中的文字颜色及位置

    • x轴相关配置

    • y轴相关配置

    • 设置折线光滑

    饼形图

    第一步:查看官网查找示例

    查找合适的示例

    复制其配置项

    option = {
    tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
    orient: 'vertical',
    left: 10,
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
    {
    name: '访问来源',
    type: 'pie',
    radius: ['50%', '70%'],
    avoidLabelOverlap: false,
    label: {
    show: false,
    position: 'center'
    },
    emphasis: {
    label: {
    show: true,
    fontSize: '30',
    fontWeight: 'bold'
    }
    },
    labelLine: {
    show: false
    },
    data: [
    {value: 335, name: '直接访问'},
    {value: 310, name: '邮件营销'},
    {value: 234, name: '联盟广告'},
    {value: 135, name: '视频广告'},
    {value: 1548, name: '搜索引擎'}
    ]
    }
    ]
    };

    第二步:定制图表

    • 修改小图标的宽度和高度

    • 修改饼图位置

    ECharts社区

    社区就是一些,活跃的echart使用者,交流和贡献定制好的图表的地方。

    配置项整理

    以下是基于setOption()函数中的配置项的整理,都参考自官网

    title属性

    配置项

    title: {
    id: 1, // 组件ID, 默认不指定
    show: true, // 是否显示标题组件, true表示显示, false表示不显示
    text: '我是标题', // 主标题文本,支持使用"\n"换行
    link: 'http://www.baidu.com', // 主标题文本超链接, 点击主标题跳转超链接
    target: 'blank', // 指定窗口打开超链接,可选: 'selft'|'blank'。self表示当前窗口打开; blank表示新窗口打开
    textStyle: { // 主标题文字的样式, 是一个对象
    color: '#333', // 主标题文字的颜色
    fontStyle: 'normal', // 主标题文字字体的风格,可选: 'normal'|'italic'|'oblique'。normal表示正常字体; italic表示斜体; oblique也是斜体
    fontWeight: 'lighter', // 主标题文字字体的粗细, 可选: 'noraml'|'bold'|'bolder'|'lighter'|100|200|300|400...
    fontFamily: 'Arial', // 主标题文字的字体系列, 可选: 'sans-serif'|'serif'|'monospace'|'Courier New'|...
    fontSize: 20, // 主标题文字的字体大小
    lineHeight: 10, // 行高, 注意: rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。
    width: '100%', // 文字块的宽度。一般不用指定,不指定则自动是文字的宽度。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。width 也可以是百分比字符串,如 '100%'。注意,如果不定义 rich 属性,则不能指定 width 和 height。
    height: '100%', // 文字块的高度。一般不用指定,不指定则自动是文字的高度。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。注意,如果不定义 rich 属性,则不能指定 width 和 height。
    textBorderColor: '#FF0000', // 文字本身的描边颜色
    textBorderWidth: 3, // 文字本身的描边宽度
    textShadowColor: '#FF00AB', // 文字本身的阴影颜色。
    textShadownBlur: 3, // 文字本身的阴影长度。
    textShadowOffsetX: -5, // 文字本身的阴影 X 偏移, 即阴影距离文字本身位置的横向偏移量(如果是正数阴影向右偏移多少,如果是负数则表示向左偏移多少)
    textShadowOffsetY: 5, // 文字本身的阴影 Y 偏移, 即阴影距离文字本身位置的纵向偏移量(如果是正数阴影向下偏移多少,如果是负数则表示向上偏移多少)
    rich: {}, // 在rich中可以自定义富文本样式, 具体参考: https://echarts.apache.org/zh/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE
    },
    subtext: '我是副标题', // 副标题文本,支持使用 \n 换行。
    sublink: 'http://www.bilibili.com', // 副标题文本超链接。
    subtarget: 'blank', // 指定窗口打开超链接,可选: 'selft'|'blank'。self表示当前窗口打开; blank表示新窗口打开
    subtextStyle: { // 副标题文字的样式, 是一个对象
    color: '#333', // 副标题文字的颜色
    fontStyle: 'normal', // 副标题文字字体的风格,可选: 'normal'|'italic'|'oblique'。normal表示正常字体; italic表示斜体; oblique也是斜体
    fontWeight: 'lighter', // 副标题文字字体的粗细, 可选: 'noraml'|'bold'|'bolder'|'lighter'|100|200|300|400...
    fontFamily: 'Arial', // 副标题文字的字体系列, 可选: 'sans-serif'|'serif'|'monospace'|'Courier New'|...
    fontSize: 20, // 副标题文字的字体大小
    align: 'center', // 注意,这是副标题文字的水平对其方式,默认自动, 可选: 'left'|'center'|'right'。rich 中如果没有设置 align,则会取父层级的 align。
    verticalAlign: 'middle', // 副标题文字垂直对齐方式,默认自动。可选: 'top'|'middle'|'bottom'。rich 中如果没有设置 verticalAlign,则会取父层级的 verticalAlign。
    lineHeight: 10, // 行高, 注意: rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。
    width: '100%', // 文字块的宽度。一般不用指定,不指定则自动是文字的宽度。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。width 也可以是百分比字符串,如 '100%'。注意,如果不定义 rich 属性,则不能指定 width 和 height。
    height: '100%', // 文字块的高度。一般不用指定,不指定则自动是文字的高度。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。注意,如果不定义 rich 属性,则不能指定 width 和 height。
    textBorderColor: '#FF0000', // 文字本身的描边颜色
    textBorderWidth: 3, // 文字本身的描边宽度
    textShadowColor: '#FF00AB', // 文字本身的阴影颜色。
    textShadownBlur: 3, // 文字本身的阴影长度。
    textShadowOffsetX: -5, // 文字本身的阴影 X 偏移, 即阴影距离文字本身位置的横向偏移量(如果是正数阴影向右偏移多少,如果是负数则表示向左偏移多少)
    textShadowOffsetY: 5, // 文字本身的阴影 Y 偏移, 即阴影距离文字本身位置的纵向偏移量(如果是正数阴影向下偏移多少,如果是负数则表示向上偏移多少)
    rich: {}, // 在rich中可以自定义富文本样式, 具体参考: https://echarts.apache.org/zh/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE
    },
    textAlign: 'auto', // 标题文字整体(包括 text 和 subtext)的水平对齐。可选值:'auto'|'left'|'right'|'center'。
    textVerticalAlign: 'auto', // 整体(包括 text 和 subtext)的垂直对齐。可选值:'auto'|'top'|'bottom'|'middle'。
    triggerEvent: false, // 表示是否触发事件, 是一个布尔值
    padding: [10, 5, 10, 5], // 标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。示例: "padding: 5"设置内边距为5; "padding: [5, 10]"设置上下内边距为5,左右内边距为10; "padding: [5,10,5,10]"设置上右下左的内边距
    itemGap: 40, // 主副标题之间的间隔距离
    zlevel: 2, // 所有图形的 zlevel 值。zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
    Z: 2, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低,而且不会创建新的 Canvas。
    left: '50%', // title 组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'。如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。
    top: '20px', // title 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'。如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。默认自适应auto。
    right: '50%', // title 组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。
    bottom: '50px', // title 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应auto。
    backgroundColor: '#eee', // 标题背景色,默认透明transparent。颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)' ,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'
    borderColor: '#00f', //标题的边框颜色。支持的颜色格式同 backgroundColor。
    borderWidth: 15, // 标题的边框线宽。
    borderRadius: 15, // 圆角半径,单位px,支持传入数组分别指定 4 个圆角半径。示例: "borderRadius:5"统一设置四个角的圆角大小; "borderRadius:[5,5,0,0]"设置左上、右上、右下、左下的圆角大小。
    shadowBlur: 15, // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。注意:此配置项生效的前提是,设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor。
    shadowColor: '#e6c', // 阴影颜色。支持的格式同color。注意:此配置项生效的前提是,设置了 show: true。
    shadowOffsetX: 15, // 阴影水平方向上的偏移距离。注意:此配置项生效的前提是,设置了 show: true。
    shadowOffsetY: 20, // 阴影垂直方向上的偏移距离。注意:此配置项生效的前提是,设置了 show: true。
    }

    示例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>数据可视化-ECharts</title>
    <style type="text/css">
    .echarts-box {
    width: 400px;
    height: 400px;
    background-color: #B3D8FF;
    }
    </style>
    </head>
    <body>
    <!-- 1.准备一个带长度和宽度的盒子 -->
    <div class="echarts-box"></div>
    <!-- 2.引入echarts.js和echarts-wordcloud.js -->
    <script src="js/echarts.min.js"></script>
    <script src="js/echarts-wordcloud.min.js"></script>
    <!-- 3.进行配置 -->
    <script>
    /* 3.初始化实例对象,语法:echarts.init(dom容器) */
    var myChart = echarts.init(document.querySelector(".echarts-box"));
    /* 4.指定配置项和数据 */
    var option = {
    /* title:标题组件,包含主标题和副标题 */
    title: {
    id: 1, // 组件ID, 默认不指定
    show: true, // 是否显示标题组件, true表示显示, false表示不显示
    text: '我是标题', // 主标题文本,支持使用"\n"换行
    link: 'http://www.baidu.com', // 主标题文本超链接, 点击主标题跳转超链接
    target: 'blank', // 指定窗口打开超链接,可选: 'selft'|'blank'。self表示当前窗口打开; blank表示新窗口打开
    textStyle: { // 主标题文字的样式, 是一个对象
    color: '#333', // 主标题文字的颜色
    fontStyle: 'normal', // 主标题文字字体的风格,可选: 'normal'|'italic'|'oblique'。normal表示正常字体; italic表示斜体; oblique也是斜体
    fontWeight: 'lighter', // 主标题文字字体的粗细, 可选: 'noraml'|'bold'|'bolder'|'lighter'|100|200|300|400...
    fontFamily: 'Arial', // 主标题文字的字体系列, 可选: 'sans-serif'|'serif'|'monospace'|'Courier New'|...
    fontSize: 20, // 主标题文字的字体大小
    lineHeight: 10, // 行高, 注意: rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。
    width: '100%', // 文字块的宽度。一般不用指定,不指定则自动是文字的宽度。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。width 也可以是百分比字符串,如 '100%'。注意,如果不定义 rich 属性,则不能指定 width 和 height。
    height: '100%', // 文字块的高度。一般不用指定,不指定则自动是文字的高度。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。注意,如果不定义 rich 属性,则不能指定 width 和 height。
    textBorderColor: '#FF0000', // 文字本身的描边颜色
    textBorderWidth: 3, // 文字本身的描边宽度
    textShadowColor: '#FF00AB', // 文字本身的阴影颜色。
    textShadownBlur: 3, // 文字本身的阴影长度。
    textShadowOffsetX: -5, // 文字本身的阴影 X 偏移, 即阴影距离文字本身位置的横向偏移量(如果是正数阴影向右偏移多少,如果是负数则表示向左偏移多少)
    textShadowOffsetY: 5, // 文字本身的阴影 Y 偏移, 即阴影距离文字本身位置的纵向偏移量(如果是正数阴影向下偏移多少,如果是负数则表示向上偏移多少)
    rich: {}, // 在rich中可以自定义富文本样式, 具体参考: https://echarts.apache.org/zh/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE
    },
    subtext: '我是副标题', // 副标题文本,支持使用 \n 换行。
    sublink: 'http://www.bilibili.com', // 副标题文本超链接。
    subtarget: 'blank', // 指定窗口打开超链接,可选: 'selft'|'blank'。self表示当前窗口打开; blank表示新窗口打开
    subtextStyle: { // 副标题文字的样式, 是一个对象
    color: '#333', // 副标题文字的颜色
    fontStyle: 'normal', // 副标题文字字体的风格,可选: 'normal'|'italic'|'oblique'。normal表示正常字体; italic表示斜体; oblique也是斜体
    fontWeight: 'lighter', // 副标题文字字体的粗细, 可选: 'noraml'|'bold'|'bolder'|'lighter'|100|200|300|400...
    fontFamily: 'Arial', // 副标题文字的字体系列, 可选: 'sans-serif'|'serif'|'monospace'|'Courier New'|...
    fontSize: 20, // 副标题文字的字体大小
    align: 'center', // 注意,这是副标题文字的水平对其方式,默认自动, 可选: 'left'|'center'|'right'。rich 中如果没有设置 align,则会取父层级的 align。
    verticalAlign: 'middle', // 副标题文字垂直对齐方式,默认自动。可选: 'top'|'middle'|'bottom'。rich 中如果没有设置 verticalAlign,则会取父层级的 verticalAlign。
    lineHeight: 10, // 行高, 注意: rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。
    width: '100%', // 文字块的宽度。一般不用指定,不指定则自动是文字的宽度。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。width 也可以是百分比字符串,如 '100%'。注意,如果不定义 rich 属性,则不能指定 width 和 height。
    height: '100%', // 文字块的高度。一般不用指定,不指定则自动是文字的高度。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。注意,如果不定义 rich 属性,则不能指定 width 和 height。
    textBorderColor: '#FF0000', // 文字本身的描边颜色
    textBorderWidth: 3, // 文字本身的描边宽度
    textShadowColor: '#FF00AB', // 文字本身的阴影颜色。
    textShadownBlur: 3, // 文字本身的阴影长度。
    textShadowOffsetX: -5, // 文字本身的阴影 X 偏移, 即阴影距离文字本身位置的横向偏移量(如果是正数阴影向右偏移多少,如果是负数则表示向左偏移多少)
    textShadowOffsetY: 5, // 文字本身的阴影 Y 偏移, 即阴影距离文字本身位置的纵向偏移量(如果是正数阴影向下偏移多少,如果是负数则表示向上偏移多少)
    rich: {}, // 在rich中可以自定义富文本样式, 具体参考: https://echarts.apache.org/zh/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE
    },
    textAlign: 'auto', // 标题文字整体(包括 text 和 subtext)的水平对齐。可选值:'auto'|'left'|'right'|'center'。
    textVerticalAlign: 'auto', // 整体(包括 text 和 subtext)的垂直对齐。可选值:'auto'|'top'|'bottom'|'middle'。
    triggerEvent: false, // 表示是否触发事件, 是一个布尔值
    padding: [10, 5, 10, 5], // 标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。示例: "padding: 5"设置内边距为5; "padding: [5, 10]"设置上下内边距为5,左右内边距为10; "padding: [5,10,5,10]"设置上右下左的内边距
    itemGap: 40, // 主副标题之间的间隔距离
    zlevel: 2, // 所有图形的 zlevel 值。zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
    Z: 2, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低,而且不会创建新的 Canvas。
    left: '50%', // title 组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'。如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。
    top: '20px', // title 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'。如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。默认自适应auto。
    right: '50%', // title 组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。
    bottom: '50px', // title 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应auto。
    backgroundColor: '#eee', // 标题背景色,默认透明transparent。颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)' ,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'
    borderColor: '#00f', //标题的边框颜色。支持的颜色格式同 backgroundColor。
    borderWidth: 15, // 标题的边框线宽。
    borderRadius: 15, // 圆角半径,单位px,支持传入数组分别指定 4 个圆角半径。示例: "borderRadius:5"统一设置四个角的圆角大小; "borderRadius:[5,5,0,0]"设置左上、右上、右下、左下的圆角大小。
    shadowBlur: 15, // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。注意:此配置项生效的前提是,设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor。
    shadowColor: '#e6c', // 阴影颜色。支持的格式同color。注意:此配置项生效的前提是,设置了 show: true。
    shadowOffsetX: 15, // 阴影水平方向上的偏移距离。注意:此配置项生效的前提是,设置了 show: true。
    shadowOffsetY: 20, // 阴影垂直方向上的偏移距离。注意:此配置项生效的前提是,设置了 show: true。
    }}
    myChart.setOption(option);
    /* 让图表跟随屏幕自动的去适应 */
    window.addEventListener("resize", function() {
    myChart.resize();
    })
    </script>
    </body>
    </html>

    待完......

  • 内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: