文章目录
- 📚js
- 🐇整体框架
- 🐇option
- 🐇字体大小设置总结
📚js
🐇整体框架
- 使用
echarts.init
方法初始化了一个 ECharts 实例,指定了一个 div 元素作为图表的容器。 - 定义图表的配置项option,其中包括了图表的标题、提示框、x 轴、y 轴、数据系列等等。
- 通过
myChart.setOption
将配置项应用到echarts实例。 - 绑定事件处理函数
myChart.resize
以便让图表自适应新的窗口大小,确保图表在不同尺寸的屏幕上能够正确显示。var myChart = echarts.init(document.getElementById('test1')); var option = {...}; if (option && typeof option === 'object') { myChart.setOption(option); } window.addEventListener('resize', myChart.resize);
🐇option
- 标题、悬浮框
title: { text: '唐代人物享年数据分布', left: 'center', top: '1%', textStyle: { color: '#333', fontSize: 34, fontWeight: 'bold', fontFamily: 'KaiTi, serif' } }, tooltip: { trigger:'axis', formatter: function (params) { return params[0].value[0] + '岁:' + params[0].value[1] + '(人)'; } }
- X轴Y轴
splitLine
用于配置轴线的分隔线。lineStyle
用于指定分隔线的样式,type: 'dashed'
表示分隔线的类型为虚线。axisLabel
配置坐标轴刻度标签的样式和显示内容。设置fontSize: 22
表示标签的字体大小为 22px。- 当
scale
属性设置为true
时,表示使用线性坐标轴,即坐标轴会根据数据的值进行线性缩放和展示。这意味着坐标轴会根据数据的最大值和最小值来自动缩放坐标轴的范围,以便更好地展示数据的分布情况。
xAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed' } }, axisLabel: { fontSize: 22 }, }, yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed' } }, axisLabel: { fontSize: 22 }, scale: true }
- 数据系列的配置
- 指定数据系列的type,echarts就自动生成对应的图表了。关于echarts的type:
- 折线图(line):用于显示数据随连续变量变化的趋势。
- 柱状图(bar):用于比较不同类别的数据大小。
- 饼图(pie):用于展示数据的占比情况。
- 雷达图(radar):用于展示多变量的数据对比。
- 地图(map):用于展示地理区域的数据分布。
- 散点图(scatter):用于表示两个变量之间的关系。
- 箱型图(boxplot):用于展示一组数据的分散情况。
- 热力图(heatmap):用于显示数据的密集程度。
symbolSize
和itemStyle
symbolSize
是用来设置每个数据项散点标记的大小函数,因为散点图中的每个数据项可能具有不同的大小,所以这是一个可由数据决定的动态属性。itemStyle
主要用于设置散点图的图形样式,包括阴影效果、颜色和高亮样式等。这些是应用于整个系列的样式设置,对所有的散点标记生效。symbolSize
用于数据驱动的动态设置,而itemStyle
用于静态的整体样式配置。
markLine
:添加标线。type
属性代表标线的类型,可以是平均值、最大值、最小值等。lineStyle
用于设置标线的线条样式,可以指定颜色、宽度等属性。而label
则用于设置标线的标签样式,包括是否显示、字体大小等。
series: [ { name: '人数', data: [ // 数据项,[[x1, y1], [x2, y2], ...] [2, 1], [3, 1], // ... ], type: 'scatter', symbolSize: function (data) { // 参照data[1]人数数值设置散点标记的大小 return Math.sqrt(data[1]) * 5.6; }, itemStyle: { // 阴影模糊大小 shadowBlur: 10, // 阴影颜色及透明度 shadowColor: 'rgba(190, 210, 187, 0.6)', // 阴影垂直偏移 shadowOffsetY: 5, // 通过径向渐变设置图形颜色 color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [ { offset: 0, color: '#3d8e86' }, { offset: 1, color: '#88bfb8' } ]), emphasis: { color: 'rgba(200, 107, 55, 0.6)' } }, markLine: { data: [ {type: 'average', name: '平均值'} ], lineStyle: { color: '#a04c3b' }, label: { fontSize: 22 } } } ]
- 指定数据系列的type,echarts就自动生成对应的图表了。关于echarts的type:
🐇字体大小设置总结
-
标题字体
title: { textStyle: { fontSize: 34, } }
-
坐标轴字体
xAxis: { axisLabel: { fontSize: 22 } }
-
标线字体
markLine: { label: { fontSize: 22 } }