数据可视化
新时代的弩力
搬砖崽一枚
展开
-
echart环形图的options
记录echart配置原创 2023-03-07 17:16:49 · 164 阅读 · 0 评论 -
Echart自适应图表大小和字体大小
思路:监听window的resize事件,获取屏幕宽度,计算出设计图下的字体大小,通过通过echart实例的setOption()和resize()方法就可以。其中,setOption方法是用来重新设置字体大小等参数和数据,echart会自动合并这些参数,resize是用来在容器发生改变时该表图表尺寸的。主要代码如下:window.addEventListener('resize', () => { //新的配置参数,会和老的配置参数合并 var newOptio.原创 2021-05-24 11:24:53 · 2322 阅读 · 0 评论 -
echarts水晶球的使用
引入echart.js和水晶球插件echart.liquidfill.js<scriptsrc="./js/echarts.js"></script><scriptsrc="./js/echarts-liquidfill.js"></script>版本如下 var option; var water_color = { type: 'linear', x: 0, ...原创 2021-04-23 21:20:35 · 571 阅读 · 0 评论 -
2021-04-23 Echart仪表盘
//仪表盘刻度 let axisTicks = { show: true, lineStyle: { color: '#1b8586', width: 1 }, distance: -10, splitNumber: 3, } let splitLines = { show: true, distance: -15...原创 2021-04-23 21:01:25 · 240 阅读 · 0 评论 -
Echarts颜色的设置
关于echarts中color属性的设置,可以是常规的和css一样的样式:如:”rgba(255,255,255,0.2)“ rgb(255,255,255,0.2)" "#fff" "blue"也可以是渐变,如线性渐变和径向渐变,如下:// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置color: { type: 'linear'原创 2021-04-23 20:57:16 · 2194 阅读 · 0 评论 -
Echarts实现环形进度图
利用Echart的饼状图实现环形进度图:对于pie饼状图,要从构成上去理解它:圆心center和半径radius确定一个饼状图,data里的数据就会自动绘制成饼状图,这是最基本的。饼状图默认是从以直角坐标系上的90°,即正y轴,顺时针画的,startAngle:270,更改起始角度clockwise:true,表示是顺时针,fals表示逆时针。option设置如下:关键点:在于data只能有两个数据,第一个数据就是要显示的数据,显示的label为所占的百分比,formatter就原创 2021-04-23 14:52:04 · 7900 阅读 · 2 评论