echart自定义仪表盘样式

话不多说直接上图应用的是echart中的仪表盘

``javascriptvar chartDom = document.getElementById('main')var myChart = echarts2.init(chartDom)var optionoption = {series: [{center: ['50%', '46%'],radius: '90%',type: 'gauge',startAngle: 220,endAngle: -40,min: 0,max: 2.6,roundCap: true,itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#297FFE' }, //柱图渐变色{ offset: 1, color: '#08E5FF' } //柱图渐变色]),shadowColor: '#297FFE',shadowBlur: 10,shadowOffsetX: 2,shadowOffsetY: 2},progress: {// show:false,roundCap: true,show: true,width: 12},axisLine: {roundCap: true,lineStyle: {width: 12}},axisTick: {show: false},splitLine: {show: false},axisLabel: {show: false},pointer: {show: false},title: {show: false},detail: {valueAnimation: true,fontSize: 80,offsetCenter: [0, '0%'],formatter: function(value) {return '{value|' + value + '}{unit|%}'},rich: {value: {fontSize: 28,fontWeight: 'bolder',color: '#15A9F1'},unit: {fontSize: 12,color: '#15A9F1',padding: [0, 0, -10, 10]}}},data: [{value: 2.33,name: '月收益'}],title: {color: '#00EBEE',fontSize: 14,offsetCenter: [0, '80%']}}]}option && myChart.setOption(option)

有问题欢迎讨论

echart自定义仪表盘样式相关推荐

Laravel自定义分页样式
Laravel 的分页组件默认为 Bootstrap 的分页样式,但如果我们用的并不是 Bootstrap 或者说分页的 HTML结构不一样,这时我们需要自定义分页.其实 Laravel 的分页组件是 ...
[转]C# winForm 自定义鼠标样式的两种方法
本文转自:http://www.cnblogs.com/hzbzxm/archive/2008/09/15/1291104.html 以前试过在WinForm中自定义鼠标样式,结果显示出来的鼠标变成单 ...
自定义Word样式模板，设置为默认模板
文章目录前言一.具体操作步骤前言由于在大学毕业写论文的时候,论文格式的要求十分严格,但是在完成论文编辑之后,发现这个论文的格式样式对于今后word排版大有益处,于是就将该论文的格式样式保存在一 ...
用css自定义滚动条样式
如果你是一个搞网页前端的,有必要了解一下自定义滚动条样式这个东东.目前支持自定义滚动条样式的有IE浏览器.webkit内核浏览器(chrome). IE下的滚动条样式 1.样式规则 scrollbar ...
自定义checkbox样式
通过选中时添加背景图片自定义CheckBox样式效果: CSS样式: <style type="text/css>label {width: 10%;display: flex ...
自定义scoll样式
使用伪类自定义scroll样式效果: 代码: <!DOCTYPE html> <html><head><meta charset="utf-8&q ...
php复选框样式,如何自定义checkbox样式？附代码
本篇文章给大家带来的内容是关于如何自定义checkbox样式?附代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 修改原生checkbox样式. 效果原理 1.利用CSS3属性 ...
Arcgis for javascript不同的状态下自定义鼠标样式
俗话说:爱美之心,人皆有之.是的,没错,即使我只是一个做地图的,我也希望自己的地图看起来好看一点.在本文,给大家讲讲在Arcgis for javascript下如何自定义鼠标样式. 首先,说几个状态 ...
echarts自定义showlading()样式和文本
1.首先引入echarts.js 2.在页面定义自己的echarts变量 var myChart = echarts.init(document.getElementById('main')); 3. ...

echart自定义仪表盘样式

echart自定义仪表盘样式相关推荐

最新文章

热门文章