Echarts 仪表盘倾斜一定角度显示,非中间对称
echarts 显示 一定 角度 中间 对称 仪表盘 倾斜
2023-09-14 09:15:35 时间
第024个
大多数的情况下,制作的仪表盘都是中规中矩,横向中间对称,但是生活中的汽车,摩托车等仪表盘确是要倾斜一定角度的,Echarts中我们就模拟一个带有倾斜角度的仪表盘。核心代码见示例源代码
示例效果
示例源代码(共77行)
/*
* @Author: 还是大剑师兰特(CSDN)
* @下面源代码版权归还是大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @First published in CSDN
* @First published time: 2023-02-27
*/
<template>
<div class="container">
<h3>vue+echarts:仪表盘倾斜一定角度显示,非中间对称</h3>
<p>大剑师兰特,还是大剑师兰特</p>
<div id="vue-echarts" ref="refEcharts"> </div>
</div>
</template>
<script>
import * as echarts from 'echarts'; //局部引用,如果采用全局模式,这里不写
export default {
name: 'cuclife',
data() {
return {}
},
methods: {
initCharts() {
let myChart = echarts.init(this.$refs.refEcharts);
let mycolor = [[0.2, "rgba(255,0,0,1)"], [0.8, "rgba(0,255,255,1)"], [1, "rgba(0,255,0,1)"]];
myChart.setOption({
title: {
text: '大剑师的ECharts仪表盘示例'
},
series: [{
name: "Indicator2",
type: "gauge",
detail: {
formatter: "{value}%"
},
startAngle: 240, //核心代码
endAngle: 30, //核心代码
axisLine: {
show: true,
lineStyle: {
color: mycolor,
}
},
data: [{
value: 50,
name: "Percent",
itemStyle: {
color: 'red'
}
}]
}]
});
}
},
mounted() {
this.initCharts();
}
}
</script>
<style scoped>
.container {
width: 840px;
height: 580px;
margin: 50px auto 0;
border: 1px solid rgb(228, 57, 97);
}
#vue-echarts {
width: 800px;
height: 460px;
border: 1px solid #d8d;
margin: 0 auto;
}
</style>
相关资料参考
https://echarts.apache.org/zh/option.html#series-gauge
专栏介绍
在vue和echarts联合技术栈的操控下,本专栏提供行之有效的源代码示例。这里既包括样式的修改,又包括常用bug的解决。
(1)提供title示例:展示控制标题的颜色、位置、子标题,连接等
(2)提供legend示例:展示控制图例的类型、宽度、高度、位置、间隙,边框、阴影、透明度、偏移,字体、颜色,提示语等
(3)提供grid示例:展示控制绘图网格的位置、宽度、高度、边框、阴影等
(4)提供xAxis示例:展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等
(5)提供yAxis示例:展示控制y 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等
(6)提供dataZoom示例:展示控制区域缩放的类型、位置、filterMode等
(7)提供tooltip示例:展示控制提示框组件的触发方式、位置、样式,标签、动画、内容格式器等
(8)提供地理坐标系示例:展示控制地理坐标的经纬度、放缩、位置,距离、字体、边框等
(9)提供animation示例:展示控制动画的持续时间、延迟时间、动画方式,连接等
(10)提供其他示例:展示series等组件的信息内容。
相关文章
- ECharts修改坐标轴,坐标轴字体,坐标轴网格样式以及控制坐标轴是否显示
- Echarts + Python 实现的动态实时大屏范例
- Echarts饼图更改颜色、显示数据且换行
- selectpage + echarts结合使用
- echarts图表点击事件之跳转页面和加载页面
- 【收藏】spring boot+websocket+echarts 后台推送数据用echarts展示
- echarts调整 legend和title的距离echarts的title和legend重合解决(各种小细节)
- echarts假数据正常,调接口无法渲染显示的原因:可能是异步的原因
- Echarts设置y轴的刻度只显示整数
- echarts动态数据不显示
- vuejs监听页面宽度变化重新加载echarts图表
- 如何解决Vue项目中使用echarts,宽度变化导致图不能resize问题
- 在Vue中使用echarts实例
- 使用ECharts对数据进行可视化
- echarts - 官网首页能进去,但是演示和文档地址进不去的 win10解决办法
- 160:vue+openlayers 地图上添加Echarts柱状图
- 158:vue+openlayers 地图上Echarts模拟飞机循环飞行
- 在Vue项目中引入 ECharts 3D 路径图 Flights GL(需安装echarts、echarts-gl、jQuery依赖,已踩坑)
- Vue环境下用ECharts绘制中国地图,并实现拖动、缩放与各省份自动轮播高亮显示
- Vue环境下,在单页面中遍历显示出多个Echarts图表
- Echarts修改柱状图柱子的宽度