我是物联网专业的学生，需要将单片机采集的数据显示在网页，当然图表方式显示更加直接，所以这里是跟着pink老师的笔记学习的一点心得。当然只是帮助大家入门如果需要还是去看官方文档更全更详细，建议多试一些样例，删一些属性看发生什么变化
可视化面板介绍
应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出
Echarts介绍
常见的数据可视化库：
- 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，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
Echarts使用步骤
1.下载并引入echarts.js文件 ->图表依赖这个js库
<script src="js/echarts.min.js"></script>
2.准备一个具备大小的DOM容器 ->生成的图表会放入这个容器
<div class="box"></div>
<style>
.box{
width:600px;
height: 400px;
}
</style>
3.初始化echarts实例对象 ->实例化echarts对象
//初始化实例对象 echarts.init(dom容器);
var myChart=echarts.init(document.querySelector(".box"));
4.指定配置项和数据option ->根据具体需求修改配置选项
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
5.将配置项设置echarts实例对象 ->让echarts对象根据修改好的配置生效
//把配置项给实例对象
myChart.setOption(option);
注意，加载echarts.js的位置， echarts.js引用放在head中或者放在body中HTML代码的前面了，造成加载时阻塞后面的html。
造成echarts Cannot read property ‘getAttribute’ of null 报错
就是 不要把echarts.js放在head中 只要将其放在< /body>之前就可以了
Echarts-基础配置
color：调色盘颜色列表
color设置我们线条的颜色 注意后面是个数组
color: ['pink', 'red', 'green', 'skyblue'],
title：标题组件
设置图标标题，包含主标题和副标题。
title: {
text: '折线图堆叠'
},
title: {
//显示策略，默认值true,可选为：true（显示） | false（隐藏）
show: true,
//主标题文本，'\n'指定换行
text: "1主标题",
//主标题文本超链接,默认值true
link:'http://www.baidu.com',
//指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
target: "self",
//副标题文本，'\n'指定换行
subtext: '副标题',
//副标题文本超链接
sublink: '',
//指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
subtarget: null,
//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x:'center',
//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'bottom',
//标题背景颜色，默认'rgba(0,0,0,0)'透明
backgroundColor: 'red',
//标题边框线宽，单位px，默认为0（无边框）
borderWidth: 5,
//标题边框颜色,默认'#ccc'
borderColor: '#ccffee',
//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
padding: 5,
//主副标题纵向间隔，单位px，默认为10
itemGap: 10,
textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal', //
},
subtextStyle: {
color: "#a1b2c3", // 副标题文字的颜色。
fontStyle: "normal", // 副标题文字字体的风格。 'normal' 'italic' 'oblique'
fontWeight: "bold", // 副标题文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 500|600。
fontSize: 18, // 字体大小
lineHeight: "130", // 行高
textBorderColor: "red", // 文字本身的描边颜色。
textBorderWidth: 5, // 文字本身的描边宽度。
textShadowColor: "transparent", // 文字本身的阴影颜色。
textShadowBlur: 0, // 文字本身的阴影长度。
textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
},
},
tooltip：提示框组件
设置图标的提示框组件，用于配置鼠标滑过或点击图表时的显示框
tooltip: {
//触发方式 axis是坐标轴触发
trigger: 'axis'
},
tooltip: {//提示框组件，用于配置鼠标滑过或点击图表时的显示框。
show: true, // 是否显示
// 触发类型 'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
trigger: 'axis',
axisPointer: { // 坐标轴指示器配置项。
// 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
type: 'cross',
},
showContent: true, //是否显示提示框浮层，默认显示。
triggerOn: 'mouseover', // 触发时机'click'鼠标点击时触发。
backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
borderColor: '#333', // 提示框浮层的边框颜色。
borderWidth: 0, // 提示框浮层的边框宽。
padding: 5, // 提示框浮层内边距，
textStyle: { // 提示框浮层的文本样式。
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 14,
},
// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
// 模板变量有 {a}, {b}，{c}，分别表示系列名，数据名，数据值等
// formatter: '{a}--{b} 的成绩是 {c}'
formatter: function(arg) {
return arg[0].name + '的分数是:' + arg[0].data
}
},
触发类型
item
数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
axis
坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
none
什么都不触发。
legend：图例组件
legend: {
// series里面有了 name值则 legend里面的data可以删掉
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
legend: {
show: true, //是否显示
icon: "circle",//图例样式
top: "55%", // 组件离容器的距离
bottom:"20%", // 组件离容器的距离
// left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'
right: "5%",
left:"10%" // // 组件离容器的距离
padding: 5, // 图例内边距
itemWidth: 6, // 图例标记的图形宽度。
itemGap: 20, // 图例每项之间的间隔。
itemHeight: 14, // 图例标记的图形高度。
selectedMode: false, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
inactiveColor: "#fffddd", // 图例关闭时的颜色。
textStyle: {//图例的公用文本样式。
color: "#aabbcc", // 文字的颜色。
fontStyle: "normal", // 文字字体的风格。'italic'
fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
fontFamily: "sans-serif", // 文字的字体系列。
fontSize: 12, // 文字的字体大小。
lineHeight: 20, // 行高。
backgroundColor: "transparent", // 文字块背景色。
borderColor: "transparent", // 文字块边框颜色。
borderWidth: 0, // 文字块边框宽度。
borderRadius: 0, // 文字块的圆角。
// padding: 0, // 文字块的内边距
// shadowColor: "transparent", // 文字块的背景阴影颜色
// shadowBlur: 0, // 文字块的背景阴影长度。
// shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
// shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
// // width: 50, // 文字块的宽度。 默认
// // height: 40, // 文字块的高度 默认
textBorderColor: "transparent", // 文字本身的描边颜色。
textBorderWidth: 0, // 文字本身的描边宽度。
textShadowColor: "transparent", // 文字本身的阴影颜色。
textShadowBlur: 0, // 文字本身的阴影长度。
textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
}
把那个点成灰色的那个对应的折线就消失了
toolbox: 工具箱组件
saveAsImage
可以另存为图片等功能，就是旁边那个下载按钮
toolbox: {
feature: {
saveAsImage: {}
}
},
dataZoom:
区域缩放
dataZoom: {
yAxisIndex: 'none'
},
dataView:
数据视图，转化为文本的格式
dataView: {readOnly: false},
restore:
还原
restore: {},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
grid: 网格配置
grid可以控制线形图 柱状图 图表大小
grid: {
left: '3%',
right: '4%',
bottom: '3%',
// 是否显示刻度标签 如果是true 就显示 否则反之
containLabel: true
},
left，riht都是相当于当前dom容器左侧或右侧来计算的
xAxis：直角坐标系 grid 中的 x 轴
xAxis: {
type: 'category',
// 是否让我们的线条和坐标轴有缝隙
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
type
坐标轴类型
'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log' 对数轴。适用于对数数据。
boundaryGap:
是否让我们的线条和坐标轴有缝隙
坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
一般设置为false不要留缝隙
yAxis：直角坐标系 grid 中的 y 轴
yAxis: {
type: 'value'
},
series: 系列列表
每个系列通过 type 决定自己的图表类型
大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
注意series里面是个数组，每个数组元素又是一个对象
series里面有了 name值则 legend里面的data可以删掉
// 系列图表配置 它决定着显示那种类型的图表
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]
}
]
name
系列名称，用于tooltip的显示，series里面有了 name值则 legend里面的data可以删掉
data
里面存放的是数组是数据
type
line
折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。
bar
柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型
pie
饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例
stack
数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加，但是我们一般不让它堆叠允许重复
markPoint & markLine
最大值最小值的点
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
完整示例加注解
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页面中
- 根据需求定制图表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js">
</script>
<style>
.box{
width:600px;
height: 400px;
}
</style>
</head>
<body>
<div class="box">
</div>
<script src="js/echarts.min.js">
</script>
<script>
//舒适化实例对象 echarts.init(dom容器);
var myChart=echarts.init(document.querySelector(".box"));
// 指定图表的配置项和数据
option = {
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'
}
],
series: [
{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
//把配置项给实例对象
myChart.setOption(option);
</script>
</body>
</html>
修改图表柱形颜色
color: ["#2f89cf"],
修改图表大小
grid决定我们的柱状图的大小
可以跟%数也可以跟px单位
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
// 是否显示刻度标签 如果是true 就显示 否则反之
containLabel: true
},
文本颜色和字体大小设置
// 设置x轴标签文字样式
// x轴的文字颜色和大小
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
X轴线的样式 不显示
// x轴样式不显示
axisLine: {
show: false
// 如果想要设置单独的线条样式
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
}
}
Y 轴相关定制
axisLabel 刻度标签
// y 轴文字标签样式
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
// y轴线条样式
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
// width: 1,
// type: "solid"
}
5232},
// y 轴分隔线样式
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
// 不显示刻度
axisTick: {
show: false
},
修改柱形为圆角以及柱子宽度 series 里面设置
series: [
{
name: "直接访问",
type: "bar",
// 修改柱子宽度
barWidth: "35%",
data: [10, 52, 200, 334, 390, 330, 220],
itemStyle: {
// 修改柱子圆角
barBorderRadius: 5
}
}
]
};
更换对应数据
// x轴中更换data数据
data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
// series 更换数据
data: [200, 300, 300, 900, 1500, 1200, 600]
让图表跟随屏幕自适应
window.addEventListener("resize", function() {
myChart.resize();
});
图形上的文本标签
// 图形上的文本标签
label: {
normal: {
show: true,
// 图形内显示
position: "inside",
// 文字的显示格式
formatter: "{c}%"
}
},
positon
top / left / right / bottom / inside / insideLeft / insideRight /
insideTop / insideBottom / insideTopLeft / insideBottomLeft /
insideTopRight / insideBottomRight
也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置
示例
position: 'top'
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']
formatter
标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
字符串模板 模板变量有：
{a}：系列名。
{b}：数据名。
{c}：数据值。
进度条样式的柱子
核心原理就是两个柱子一个柱子的样式设为条，另一个的柱子的样式设为框，然后让框压着条
条状
name: "条",
// 柱子之间的距离
barCategoryGap: 50,
//柱子的宽度
barWidth: 10,
// 柱子设为圆角
itemStyle: {
normal: {
barBorderRadius: 20,
}
},
设置第一组条状内百分比显示数据
// 图形上的文本标签
label: {
normal: {
show: true,
// 图形内显示
position: "inside",
// 文字的显示格式 {c}会自动解析data里的数据
formatter: "{c}%"
}
},
设置第一组柱子不同颜色
// 声明颜色数组
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 2. 给 itemStyle 里面的color 属性设置一个 返回值函数
itemStyle: {
normal: {
barBorderRadius: 20,
color:function(params){
// params 传进来的是柱子对象
console.log(params);
// dataIndex 是当前柱子的索引号
return myColor[params.dataIndex];
}
}
},
框状
把柱状图的颜色去掉，价格边框的颜色
name: "框",
type: "bar",
barCategoryGap: 50,
barWidth: 15,
itemStyle: {
color: "none",
borderColor: "#00c1de",
borderWidth: 3,
barBorderRadius: 15
},
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
给y轴添加第二组数据
在图的右边也显示数据
yAxis: [
{
type: "category",
data: ["印尼", "美国", "印度", "中国", "世界人口(万)"],
// 不显示y轴的线
axisLine: {
show: false
},
// 不显示刻度
axisTick: {
show: false
},
// 把刻度标签里面的文字颜色设置为白色
axisLabel: {
color: "#fff"
}
},
{
show: true,
data: [702, 350, 610, 793, 664],
// 不显示y轴的线
axisLine: {
show: false
},
// 不显示刻度
axisTick: {
show: false
},
axisLabel: {
textStyle: {
fontSize: 12,
color: "#fff"
}
}
}
],
设置两组柱子层叠
也就是让框状柱子压住条状柱子
// 给series 第一个对象里面的 添加
yAxisIndex: 0,
// 给series 第二个对象里面的 添加
yAxisIndex: 1,
如果数据显示的和数组是反过来了
可以在yAxis里面添加一个inverse默认是false
inverse:true
完整代码
// 柱状图2
(function() {
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".bar2 .chart"));
// 2. 指定配置和数据
var option = {
grid: {
top: "10%",
left: "22%",
bottom: "10%"
// containLabel: true
},
// 不显示x轴的相关信息
xAxis: {
show: false
},
yAxis: [
{
type: "category",
inverse: true,
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
// 不显示y轴的线
axisLine: {
show: false
},
// 不显示刻度
axisTick: {
show: false
},
// 把刻度标签里面的文字颜色设置为白色
axisLabel: {
color: "#fff"
}
},
{
data: [702, 350, 610, 793, 664],
inverse: true,
// 不显示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 可以修改柱子的颜色
color: function(params) {
// params 传进来的是柱子对象
console.log(params);
// dataIndex 是当前柱子的索引号
return myColor[params.dataIndex];
}
},
// 柱子之间的距离
barCategoryGap: 50,
//柱子的宽度
barWidth: 10,
// 显示柱子内的文字
label: {
show: true,
position: "inside",
// {c} 会自动的解析为 数据 data里面的数据
formatter: "{c}%"
}
},
{
name: "框",
type: "bar",
barCategoryGap: 50,
barWidth: 15,
yAxisIndex: 1,
data: [100, 100, 100, 100, 100],
itemStyle: {
color: "none",
borderColor: "#00c1de",
borderWidth: 3,
barBorderRadius: 15
}
}
]
};
// 3. 把配置给实例对象
myChart.setOption(option);
})();
折线图
- 官网找到类似实例， 适当分析，并且引入到HTML页面中
- 根据需求定制图表
修改折线图大小，显示边框设置颜色，显示刻度标签
// 设置网格样式
grid: {
top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
show: true,// 显示边框
borderColor: '#012f4a',// 边框颜色
containLabel: true // 包含刻度文字在内
},
修改图例组件中的文字颜色 距离右侧 right 为 10%
默认都是auto 居中对齐
// 图例组件
legend: {
textStyle: {
color: '#4c9bfd' // 图例文字颜色
},
right: '10%' // 距离右边10%
},
x轴相关配置
刻度去除
x轴刻度标签字体颜色
剔除x坐标轴线颜色（将来使用Y轴分割线)
轴两端是不需要内间距 boundaryGap
xAxis: {
type: 'category',
data: ["周一", "周二"],
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: '#4c9bfd' // 文本颜色
},
axisLine: {
show: false // 去除轴线
},
boundaryGap: false // 去除轴内间距
},
y轴的定制
刻度去除
字体颜色
分割线颜色
yAxis: {
type: 'value',
axisTick: {
show: false // 去除刻度
},
axisLabel: {
color: '#4c9bfd' // 文字颜色
},
splitLine: {
lineStyle: {
color: '#012f4a' // 分割线颜色
}
}
},
把折线修饰为圆滑
series 数据中添加 smooth 为 true
series: [{
name:'新增粉丝',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
// 折线修饰为圆滑
smooth: true,
},{
name:'新增游客',
data: [100, 331, 200, 123, 233, 543, 400],
type: 'line',
smooth: true,
}]
完整代码
// 折线图1模块制作
(function() {
var yearData = [
{
year: "2020", // 年份
data: [
// 两个数组是因为有两条线
[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
]
},
{
year: "2021", // 年份
data: [
// 两个数组是因为有两条线
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
]
}
];
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".line .chart"));
// 2.指定配置
var option = {
// 通过这个color修改两条线的颜色
color: ["#00f2f1", "#ed3f35"],
tooltip: {
trigger: "axis"
},
legend: {
// 如果series 对象有name 值，则 legend可以不用写data
// 修改图例组件 文字颜色
textStyle: {
color: "#4c9bfd"
},
// 这个10% 必须加引号
right: "10%"
},
grid: {
top: "20%",
left: "3%",
right: "4%",
bottom: "3%",
show: true, // 显示边框
borderColor: "#012f4a", // 边框颜色
containLabel: true // 包含刻度文字在内
},
xAxis: {
type: "category",
boundaryGap: false,
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: "#4c9bfd" // 文本颜色
},
axisLine: {
show: false // 去除轴线
}
},
yAxis: {
type: "value",
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: "#4c9bfd" // 文本颜色
},
axisLine: {
show: false // 去除轴线
},
splitLine: {
lineStyle: {
color: "#012f4a" // 分割线颜色
}
}
},
series: [
{
name: "新增粉丝",
type: "line",
// true 可以让我们的折线显示带有弧度
smooth: true,
data: yearData[0].data[0]
},
{
name: "新增游客",
type: "line",
smooth: true,
data: yearData[0].data[1]
}
]
};
// 3. 把配置给实例对象
myChart.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function() {
myChart.resize();
});
// 5.点击切换效果
$(".line h2").on("click", "a", function() {
// alert(1);
// console.log($(this).index());
// 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
// console.log(yearData[$(this).index()]);
var obj = yearData[$(this).index()];
option.series[0].data = obj.data[0];
option.series[1].data = obj.data[1];
// 需要重新渲染
myChart.setOption(option);
});
})();
注意：每次series里data数据改变需要重新渲染echarts
myChart.setOption(option);
填充颜色
// 填充区域
areaStyle: {
// 渐变色，只需要复制即可
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
},
{
offset: 0.8,
color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
},
设置拐点
symbol
'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 设置拐点颜色以及边框
itemStyle: {
color: "#0184d5",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
},
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,
//第一条 线是圆滑
smooth: true,
// 单独修改线的样式
lineStyle: {
color: "#0184d5",
width: 2
},
// 填充区域
areaStyle: {
// 渐变色，只需要复制即可
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
},
{
offset: 0.8,
color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
},
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 设置拐点颜色以及边框
itemStyle: {
color: "#0184d5",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
},
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,
饼形图
修改图例组件
修改图例组件在底部并且居中显示
修改小图标的宽度和高度
修改文字大小为
legend: {
// 距离底部为0%
bottom: "0%",
// 小图标的宽度和高度
itemWidth: 10,
itemHeight: 10,
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
// 修改图例组件的文字为 12px
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
修改水平居中 垂直居中，和大小
带有直角坐标系的比如折线图柱状图是 grid修改图形大小，而饼形图是通过 radius 修改大小
分为内圆半径和外圆半径，饼形图的大小主要是由外圆半径
series: [
{
name: "年龄分布",
type: "pie",
// 设置饼形图在容器中的位置
center: ["50%", "50%"],
// 修改内圆半径和外圆半径为 百分比是相对于容器宽度来说的
radius: ["40%", "60%"],
// 不显示标签文字
label: { show: false },
// 不显示连接线
labelLine: { show: false },
}
]
label
饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
labelLine
标签的视觉引导线配置。在 label 位置 设置为’outside’的时候会显示视觉引导线，简单说就是用线指向饼图的文本
length和length2
length 视觉引导线第一段的长度。也就是连接图形的那段线的长度
length2 视觉引导项第二段的长度，也就是连接文字的线段的长度
南丁格尔玫瑰图
它有两种模式一个是半径模式，另一个是面积模式
颜色设置
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
修改饼形图大小 ( series对象)
radius: ['10%', '70%'],
series对象 里面 data对象格式
{ value: 20, name: '云南' },
{ value: 26, name: '北京' },
{ value: 24, name: '山东' },
{ value: 25, name: '河北' },
{ value: 20, name: '江苏' },
{ value: 25, name: '浙江' },
{ value: 30, name: '四川' },
{ value: 42, name: '湖北' }
饼形图的显示模式
roseType: "radius",//半径模式
roseType: 'area',//面积模式
控制饼形图的文字的一些样式。 label 对象设置
series: [
{
name: "面积模式",
type: "pie",
radius: [30, 110],
center: ["50%", "50%"],
roseType: "radius",
// 文本标签控制饼形图文字的相关样式， 注意它是一个对象
label: {
fontSize: 10
},
}
]
};
防止缩放的时候，引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )
// 文字调整
label:{
fontSize: 10
},
// 引导线调整
labelLine: {
// 连接扇形图线长
length: 6,
// 连接文字线长
length2: 8
}
}
],
Echarts-社区介绍
Echarts-社区就是一些，活跃的echart使用者，交流和贡献定制好的图表的地方
扫一扫
189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
