主要关于echarts的代码进行解析。
echarts选择原因
Echarts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度 个性化定制的数据可视化图表。
-
Echarts能满足绝大多数可视化图表实现
-
兼容性强
-
使用方便
-
功能强大
-
-
实现数码可视化最佳选择之一
echarts学习进度
通过选择echarts官网中的需求案例，目前暂时以在echarts的案例的原型基础上进行简易的修改，
对ehcarts的配置进行了解和学习
xAxis
定义x轴配置对象
type：category
设置x轴的类型为category ，这通常用于分离数据。
boundaryGap：false
属性决定了图标的边界间隙。当设置为false时，表示数据标签会紧贴图表的边缘，不留缝隙
data:['数据名称']
定义了x轴上显示的标签数据，表示一周内的七天。
yAxis
主要是对y轴的定义，用于显示与数值相关的数据
type:'value'
设置y轴类型为value类型 ，一般与数值相关的图标（折现图和柱状图）使用value类型。
grid
grid是直角坐标系图的网格布局配置对象
left: '3%',
设置网格距离容器左侧偏移量为3%
right: '4%',
设置网格距离容器右侧偏移量为3%
bottom: '3%',
设置网格距离容器底部的偏移量为3%
containLabel: true
这个属性决定了是否让图表的标签（如x轴和y轴的标签）被包含在网格内。当设置为true时，标签会被包含在网格内，确保它们不会因为偏移而出现在网格之外。
title
title作为echarts的标题的配置对象
text:"title"
设置标题文本为title
subtext: ''
subtext的作用是在echarts图标中显示副标题
left: 'center'
设置标题位置，left: 'center'设置标题位置居中
textStyle: {
color: '#ff0000', // 这里设置标题颜色为红色
fontWeight: 'bold' // 这里设置标题字体加粗
} color是设置文本的颜色为红色
fontWeight：'bold' 设置标题文本的字体加粗。
tooltip
用于显示数据系列的详细信息，当用户将鼠标悬停在图表上的某个数据点上时，tooltip 会显示该数据点的值以及其他相关信息。
tooltip 有触发方式有两种 trigger和triggerOn
“trigger”属性用于指定tooltip的触发类型，可选值为'item'、'axis'和'none'。当设置为'item'时，tooltip会与数据项关联，并在鼠标悬停在数据项上时显示。而当设置为'axis'时，tooltip会与坐标轴关联，并在鼠标在坐标轴上移动时显示。如果设置为'none'，则不显示tooltip。
而“triggerOn”属性则是更具体地定义了触发tooltip的条件，它可以是'mousemove'、'click'、'mouseenter'、'mouseleave'等事件之一或它们的组合。通过设置“triggerOn”，可以更加灵活地控制tooltip的触发时机和触发方式。
关于tirggerOn对于使用判定需要多种时依靠代表|分隔符表示“或”关系，满足任一条件时，tooltip被触发。
补充说明：关于echarts点击事件
tooltip: {
triggerOn: 'mousemove|click',
showContent: true,
confine: true,
}, showContent 对于提示框的浮层，一般默认显示为true
confine对于是否将tooltip 框限制在图标的区域内
tooltip: {
triggerOn: 'mousemove|click',
showContent: true, // 是否显示提示框浮层，默认显示
confine: true, // 是否将 tooltip 框限制在图表的区域内
position: function (pt) { // 提示框位置自适应调整
return [pt[0], '10%']; // x方向与数据点一致，y方向始终为10%顶部位置
},
backgroundColor: '#fff',
borderColor: '#000',
}, position设施之提示浮框层的位置，
backgroundColor对提示框的背景进行设置
borderColor对提示框的边框颜色进行设置
legend
主要用于显示图表的系列（series）的标识符。
legend: {
orient: 'vertical',
left: 'left'
},-
orient对图例进行水平（'horizontal'）或者垂直显示（'vertical'）的判定，一般默认 对于图例显示为水平显示 -
left、top、right、bottom对图例的位置的控制判断
left: 控制组件离容器左侧的距离。top: 控制组件离容器上侧的距离。right: 控制组件离容器右侧的距离。bottom: 控制组件离容器下侧的距离。四个控制组件均接受像素值（如10像素）、百分比（相对于容器高度的百分比）或'auto'（自动计算位置）或 'left'、'center'、'right' 来设置图例的位置
backgroundColor、borderColor、borderWidth可以对图例进行自定义背景颜色、边框颜色、边框宽度。
-
width、height对于图例的高宽进行设置 -
itemGap: 20设置图例项目之间的间隔为20像素
注意点 关于itemGap 只影响图例中的项目间隔，并不影响图例和容器边缘的间隔。
-
textStyle这个属性允许你自定义图例中文字的样式，例如字体、大小、颜色等
textStyle: {
color: 'white', // 设置文本颜色为白色
fontSize: 12, // 设置字体大小为 12 像素
fontFamily: 'Arial', // 设置字体为 Arial
backgroundColor: 'rgba(0, 0, 0, 0.5)', // 设置文本背景颜色为半透明黑色
padding: [3, 4, 5, 6], // 设置内边距为 [3, 4, 5, 6]
} -
eventsECharts 允许你监听图例的点击事件，以便在用户点击某个图例时执行特定的操作
color
调色盘颜色列表可以通过
color:['颜色编号']
color作为组件使用时一般影响的是全局变量
series: [{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
],
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#C1EBDD', '#FFC851', '#5A5476', '#1869A0', '#FF9393'];
return colorList[params.dataIndex];
}
}
}
}]
（饼图）
或
series: [
{
data: [
120,
{
value: 200,
itemStyle: {
color: '#a90000'
}
},
150,
80,
70,
110,
130
],
type: 'bar'
}
]
（柱状图）在饼状图、柱状图等中，可以在series中设置每个系列的颜色。例如，对于饼状图，可以在series中配置每个扇区的颜色。
series
表示一组数值以及这组数据映射成的图像。每个系列通过type决定自己的图表类型，例如折线图、柱状图、饼图等。每个系列中至少包含一组数据、图表类型以及其他关于这些数据如何映射成图的参数。在ECharts中，series还可以支持动态更新和交互操作，用户可以更加直观地理解数据。ECharts中的series提供了丰富的主题和样式，用户可以根据自己的需求进行个性化定制，满足不同场景和要求的数据可视化需求。
以环形图为例：
series: [{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
],
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#C1EBDD', '#FFC851', '#5A5476', '#1869A0', '#FF9393'];
return colorList[params.dataIndex];
}
}
}
}]name: '名称',：设置这个系列的名称。
type: 'pie',：设置这个系列的类型为饼状图
radius: '50%',：设置饼图的半径为容器宽度的50%，这通常用于创建圆环图
data定义系列数据
{{value: 1048, name: '搜索引擎'},}value为数据项的值，name为数据项名称
itemStyle: {：定义这个系列中每个数据项的样式。
normal: {：定义正常的样式.
color: function(params) {：定义一个颜色函数，根据参数params来返回颜色值。
var colorList = ['#C1EBDD', '#FFC851', '#5A5476', '#1869A0', '#FF9393'];：定义一个颜色列表。
return colorList[params.dataIndex];：返回与当前数据项对应在颜色列表中的颜色。
dataZoom
type指定dataZoom的类型，对数据区域缩放和平移的功能
dataZoom: [
{
show: true,
type: 'inside',
filterMode: 'none',
xAxisIndex: [0],
startValue: -200,
endValue: 200
},
{
show: true,
type: 'inside',
filterMode: 'none',
yAxisIndex: [0],
startValue: -200,
endValue: 200
}
],show: true,：显示dataZoom组件。
type: 'inside',：dataZoom的类型为inside，即在图表内部进行缩放和平移。
filterMode: 'none',：不进行筛选，即对所有数据都生效。
xAxisIndex: [0],：指定该dataZoom组件应用于第一个x轴。
startValue: -200,：缩放的起始值为-200。
endValue: 200：缩放的结束值为200。
扫一扫
252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
