echarts 仪表盘样式

整体效果如下：

基础配置：

 let evaluation = this.$echarts.init(document.getElementById(id))evaluation.setOption({grid: {top: '6%',bottom: '18%',left: '3%',width: '96%',containLabel: true},xAxis: {show: false},yAxis: { show: false },series: seriesData,tooltip: {  // 提示设置},backgroundColor: "rgba(5,11,26,0.90)",borderColor: "rgba(5,11,26,0.90)",textStyle: {color: '#E6F3FF',fontWeight: '400',fontSize: '12px'},});window.onresize = function () {evaluation.resize()}

series数据（我的seriesData）：

实现中间圆环主要是通过设置指针尾部圆点实现的：markPoint 一共3组数据，在前面2组数据上设置了不同大小，就可以实现双圆环啦

[{name: '',z: 2,type: 'gauge',center: ['50%', '50%'],    // 默认全局居中radius: '88%', // 半径//起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。startAngle: 215,//结束角度。endAngle: -35,data: [66],clockwise: true,   //仪表盘刻度是否是顺时针增长min: 0,  //配置仪表板的数值范围max: 100,axisLine: {  // 坐标轴线show: false, // 不显示坐标轴线lineStyle: { // 属性lineStyle控制线条样式color:[[0.1, '#03B1E5'],[0.9, '#03B1E5'],[1, '#03B1E5']],width: 2,shadowColor: '#03B1E5', //默认透明shadowBlur: 3 // 阴影}},axisTick: { // 刻度线length: 12,// 属性length控制线长lineStyle: { // 属性lineStyle控制线条样式color: 'auto'//分割线和刻度线与轴线的颜色对应}},splitLine: {// 分隔线length: 12, // 属性length控制线长lineStyle: {// 属性lineStyle（详见lineStyle）控制线条样式color: 'auto',//分割线和刻度线与轴线的颜色对应width: 12},},//刻度标签。axisLabel: {fontSize: 16,color: "#03B1E5", // 文字颜色},pointer: {length: '70%',  // 指针长度width: 2},// 指针尾部圆点markPoint: {symbol: 'circle',symbolSize: 68,data: [//跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样{ x: '50%', y: '50%', itemStyle: { color: '#003593', borderWidth: 2, borderColor: '#0EB6FF' } }]},detail: {offsetCenter: [0, 0], // 中间文字color: "rgba(0,0,0,0)",},progress: {  //配置数值当前进度条统一样式show: true,overlap: false,       //多组数据时进度条是否重叠。roundCap: true,      //是否在两端显示成圆形。clip: true,            //是否裁剪掉超出仪表盘的部分},anchor: {   //表盘中指针的固定点统一样式配置}},// 外圆 设置外部坐标曲线样式 刻度线和分割线不显示{name: '',z: 2,type: 'gauge',center: ['50%', '50%'],    // 默认全局居中radius: '95%', // 半径//起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。startAngle: 225,//结束角度。endAngle: -45,data: [],clockwise: true, //仪表盘刻度是否是顺时针增长min: 0,  //配置仪表板的数值范围max: 100,axisLine: {  // 坐标轴线lineStyle: { // 属性lineStyle控制线条样式color:[[0.1, '#034B91'],[0.2, '#0460B5'],[0.3, '#0384D1'],[0.5, 'rgba(3, 183, 208, 0.6)'],[0.7, 'rgba(3, 183, 208, 0.6)'],[0.8, '#0384D1'],[0.9, '#0460B5'],[1, '#034B91']],width: 4,shadowColor: 'rgba(3, 183, 208, 0.6)', //默认透明shadowBlur: 10 // 阴影}},axisTick: { // 刻度线length: 0,// 属性length控制线长lineStyle: { // 属性lineStyle控制线条样式color: 'auto'//分割线和刻度线与轴线的颜色对应}},splitLine: {// 分隔线length: 0, // 属性length控制线长lineStyle: {// 属性lineStyle（详见lineStyle）控制线条样式color: 'auto',//分割线和刻度线与轴线的颜色对应width: 12},},//刻度标签。axisLabel: {fontSize: 10,color: "rgba(0,0,0,0)", // 文字颜色},pointer: {length: '70%',  // 指针长度width: 0},// 指针尾部圆点markPoint: {symbol: 'circle',symbolSize: 48,data: [//跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样{ x: '50%', y: '50%', itemStyle: { color: '#003593', borderWidth: 2, borderColor: '#0EB6FF' } }]},detail: {offsetCenter: [0, 0], // 中间文字color: "rgba(0,0,0,0)",},progress: {    //配置数值当前进度条统一样式show: true,overlap: false,       //多组数据时进度条是否重叠。roundCap: true,      //是否在两端显示成圆形。clip: true,            //是否裁剪掉超出仪表盘的部分},anchor: {   //表盘中指针的固定点统一样式配置}},{// 内部实心圆  设置背景颜色渐变type: 'pie',radius: '100%',center: ['50%', '50%'],z: -1,itemStyle: {normal: {color: new echarts.graphic.RadialGradient(.5, .5, .4, [{offset: 0,color: '#003493'},{offset: .3,color: '#003493'},{offset: .4,color: '#002560'},{offset: .5,color: '#011434'},{offset: .6,color: '#031D41'},{offset: .7,color: 'rgba(8, 26, 69,0.6)'},{offset: 1,color: 'rgba(8, 26, 69,0.4)'}], false),label: {show: false},labelLine: {show: false}}},hoverAnimation: false,label: {show: false},tooltip: {show: false},data: [1],},],

以上效果如下：

最下面的圆弧是单独写的css样式：

在盒子内部再加上一个div：

 <div class="dashboard"><div id="intention" ref="intention" style="width: 100%;height:100%;"></div>  // 仪表盘容器<div class="bottom-line"></div>  // 设置底部圆弧</div>

以下是scss样式：

.dashboard {
// 容器父盒子样式margin: 100px auto;width: 600px;height: 500px;position: relative;overflow: hidden;
// 底部曲线样式.bottom-line {position: absolute;top: 370px;height: 600px;width: 600px;border: none;box-sizing: border-box;padding: 4px; // 边框颜色填充范围background-image: linear-gradient(#060c1d, #081123), // 填充content-box linear-gradient(to left bottom, #72edff, #0083e7); // 填充padding-box// border-image: -webkit-linear-gradient(#72edff, #0083e7) 20 20; // 边框渐变色 设置之后无法设置  border-radius 所以放弃background-clip: content-box, padding-box;  // 设置盒子模型border-radius: 600px;}// .bottom-line:hover {//   filter: hue-rotate(30deg); //  filter(滤镜) 属性  hue-rotate给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。// }
// 伪元素遮挡多余线条.bottom-line::after {position: absolute;top: 14px;left: -50px;height: 700px;width: 700px;border-radius: 700px;background-color: #060c1d;z-index: 1;content: '';}
}

最后效果如图：

echarts 仪表盘样式相关推荐

echarts仪表盘样式设置
function fillpan(obj){var myChart1 = echarts.init($(obj.id)[0]);var option = {backgroundColor: " ...
echarts 仪表盘文字位置_ECharts仪表盘样式
仪表盘截图 Vue仪表盘样式vue代码总计 Vue仪表盘样式js代码 drawLine(){ // 基于准备好的dom,初始化echarts实例 var option = { // backgrou ...
livecharts中仪表盘_Vue中使用Echarts仪表盘展示实时数据的实现
在vue中echarts仪表盘实时数据彩笔一枚,简单记录一下. 业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中. 第一步: 基于准备好的dom,初始化echarts仪表盘实例. ...
echarts仪表盘option_ECharts仪表盘属性与使用
series[i]-gauge 用于表示ECharts仪表盘,当您要使用ECharts仪表盘的时候,需要将series中的type属性设置为" 'gauge' ",本节介绍了ECh ...
使用echarts 仪表盘制作进度效果
好久没写博客了,感觉没什么技术难点需要记录,今天就把这两天遇到的比较费时费力的东西记录一下吧,代码没有注释,逻辑不难,echarts仪表盘的配置是最花时间的.老板就给了一个静态图片,取色都是用的qq ...
Vue中使用Echarts仪表盘展示实时数据
在vue中echarts仪表盘实时数据彩笔一枚,简单记录一下. 业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中. 第一步: 基于准备好的dom,初始化echarts仪表盘实例. ...
html echart完整代码,html5 echarts仪表盘图标动画代码
特效描述:html5 echarts仪表盘图标动画代码.html5 echarts仪表盘图标动画代码代码结构 1. 引入JS 2. HTML代码 // 基于准备好的dom,初始化echarts图表 ...
echarts 仪表盘带进度条
echarts 仪表盘带进度条最终结果思路:3个仪表盘叠加代码: echarts.min.js 下载放到同级文件 <!DOCTYPE html> <html lang=" ...
echarts 仪表盘图展示百分比
echarts 仪表盘图展示百分比效果图如下: 背景图一加,效果就好看多了代码: let myChart = echarts.getInstanceByDom(document.getElemen ...

echarts 仪表盘样式

echarts 仪表盘样式相关推荐

最新文章

热门文章