目前该案例正在修改中，待完成后会与参考案例中完全不同，敬请期待...
前言
- 在实际项目中会经常遇到一些高度定制化的图表，那为了记录下自己的开发经验，打算把自己写的一些重点案例记录下来，方便自己参考和修改使用
- 参考文章 - ECharts gauge制作钟表
源码在此
- 请复制到官网测试效果：前往官方测试地址
option = {
backgroundColor: '#1b1b1b',
tooltip : {
formatter: "{a} <br/>{c} {b}"
},
graphic: [
{
type: 'text',
left: '50%',
top: '60%',
style: {
text: '自定义文本',
textAlign: 'center',
fill: '#fff',
fontSize: 16
}
}
],
series : [
// ---------------风向针------------------
// 风向的外框
{
name:'风向',
type:'gauge',
min:0,
max:12,
splitNumber:12,
radius: '38%',
startAngle:90,
endAngle:-269.999,
animation: 0.01,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[1, '#1e90ff']],
width: 2,
shadowColor : '#fff', //默认透明
shadowBlur: 10,
},
},
axisLabel: {
show: false
},
axisTick: { // 坐标轴小标记
show: false
},
splitLine: { // 分隔线
show: false
},
pointer: { // 分隔线
icon: 'rect',
length:'192%',
offsetCenter: [0,136],
width:50,
itemStyle: {
color: '#ffffff00',
borderType: 'dashed',
borderColor: 'white',
borderWidth: 1,
borderDashOffset: 8
}
},
detail : {
show: false
},
// 钟表中央内容
// data:[{value: 0, name: 'ROLEX'}]
data:[{value: 0, name: ''}]
},
// 风向的箭头图表
{
name:'风向',
type:'gauge',
min:0,
max:12,
splitNumber:12,
radius: '38%',
startAngle:90,
endAngle:-269.999,
animation: 0.01,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[1, '#1e90ff']],
width: 2,
shadowColor : '#fff', //默认透明
shadowBlur: 10,
},
},
axisLabel: {
show: false
},
axisTick: { // 坐标轴小标记
show: false
},
splitLine: { // 分隔线
show: false
},
pointer: { // 分隔线
icon: 'path://M540 50 L780 950 L540 700 L300 950 Z',
length:'28%',
offsetCenter: [0,-70],
width:20,
itemStyle: {
color: '#ffffff',
// borderType: 'dashed',
// borderColor: 'white',
// borderWidth: 1,
// borderDashOffset: 8
}
},
detail : {
show: false
},
// 钟表中央内容
// data:[{value: 0, name: 'ROLEX'}]
data:[{value: 0, name: ''}]
},
// 风向内的一个标志图标
{
name:'风向',
type:'gauge',
min:0,
max:12,
splitNumber:12,
radius: '38%',
startAngle:90,
endAngle:-269.999,
animation: 0.01,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[1, '#1e90ff']],
width: 2,
shadowColor : '#fff', //默认透明
shadowBlur: 10,
},
},
axisLabel: {
show: false
},
axisTick: { // 坐标轴小标记
show: false
},
splitLine: { // 分隔线
show: false
},
pointer: { // 分隔线
icon: 'path://M644.427078 956.858834c-1.959631 0-3.929496-0.322341-5.829775-0.981351l-93.384877-32.326243c-9.302877-3.219321-14.233166-13.371542-11.012821-22.674419 3.219321-9.3039 13.372565-14.233166 22.674419-11.012821l69.729108 24.136723 0-27.361161-56.793494-51.671846c-4.507664-4.100388-6.607488-10.218736-5.568832-16.223496 1.481747-8.56405 2.202155-15.871479 2.202155-22.339798 0-0.37146 0.01228-0.74292 0.034792-1.113357l10.960633-175.081551c0.372483-5.954619 3.700275-11.328 8.863878-14.31503 5.166673-2.989077 11.482519-3.192715 16.82827-0.548492l311.807538 154.23271 0-64.716954L589.587076 410.05312c-3.866051-3.385097-6.083555-8.273431-6.083555-13.411451L583.503521 181.125197c0-22.372543-9.601682-51.562353-24.461111-74.362638-15.458063-23.719214-34.08326-37.323047-51.099818-37.323047-17.016559 0-35.642778 13.602809-51.099818 37.322024-14.859429 22.800285-24.460088 51.990095-24.460088 74.362638l0 215.515449c0 5.13802-2.217505 10.027377-6.083555 13.411451L100.941993 694.860724l0 64.501036 306.089303-153.963581c5.323239-2.677992 11.632945-2.517333 16.813944 0.425695 5.180999 2.943029 8.5487 8.280594 8.975419 14.223956l13.57825 189.452863c0.030699 0.423649 0.045025 0.849344 0.045025 1.274016 0 3.140527 0.372483 6.514367 0.76748 10.085706l0.146333 1.332345c0.618077 5.675256-1.51961 11.304464-5.749958 15.138792l-54.42761 49.327452 0 27.220968L443.965487 893.933689c16.090467-6.587022 51.374064-9.872858 73.997318 23.608697 5.511527 8.156774 3.367701 19.237133-4.790096 24.74866-8.156774 5.509481-19.237133 3.367701-24.74866-4.790096-5.106298-7.557116-11.355629-11.511171-19.105127-12.087293-6.149047-0.459464-11.268648 1.313925-12.056594 1.604544-0.410346 0.186242-0.512676 0.209778-0.997724 0.38067l-81.002872 28.452006c-5.453199 1.914606-11.496845 1.067308-16.213263-2.27481-4.715395-3.342118-7.518231-8.762571-7.518231-14.543228l0-60.274782c0-5.031597 2.12643-9.827833 5.854335-13.20679l53.638641-48.613184c-0.12382-1.769296-0.209778-3.598968-0.226151-5.482875l-11.624758-162.198126L91.127464 804.205085c-5.52483 2.7793-12.096503 2.494821-17.362436-0.750083s-8.471952-8.987698-8.471952-15.173584l0-101.504812c0-5.13802 2.217505-10.027377 6.084579-13.411451l325.355089-284.808628L396.732743 181.125197c0-29.250184 11.588943-65.203024 30.242791-93.826945 22.487154-34.504862 51.241035-53.507658 80.967056-53.507658 29.723975 0 58.477856 19.002796 80.966033 53.507658 18.654872 28.624944 30.244838 64.576761 30.244838 93.826945l0 207.430306 325.350996 284.808628c3.866051 3.385097 6.083555 8.273431 6.083555 13.411451l0 101.504812c0 6.163373-3.184529 11.890818-8.420787 15.142885-5.234211 3.252067-11.780301 3.567245-17.306154 0.833995L611.344612 649.180336l-9.253758 147.804301c-0.025583 5.622044-0.436952 11.579733-1.24741 18.022469l55.579853 50.567699c3.712555 3.377934 5.828752 8.16496 5.828752 13.184277l0 60.274782c0 5.76633-2.789533 11.175527-7.485485 14.519692C651.707902 955.73115 648.085398 956.858834 644.427078 956.858834z',
length:'38%',
offsetCenter: [0,50],
width:30,
itemStyle: {
color: '#ffffff',
// borderType: 'dashed',
// borderColor: 'blue',
// borderWidth: 1,
// borderDashOffset: 8
}
},
detail : {
show: false
},
// 钟表中央内容
// data:[{value: 0, name: 'ROLEX'}]
data:[{value: 0, name: ''}]
},
// {
// name:'分钟',
// type:'gauge',
// min:0,
// max:12,
// splitNumber:12,
// radius: '60%',
// startAngle:90,
// endAngle:-269.999,
// animation: 0,
// axisLine: { // 坐标轴线
// lineStyle: { // 属性lineStyle控制线条样式
// color: [[1, '#f4b400']],
// width: 0,
// },
// },
// axisLabel: {
// show: false
// },
// axisTick: { // 坐标轴小标记
// show: false
// },
// splitLine: { // 分隔线
// show: false
// },
// pointer: { // 分隔线
// shadowColor : '#fff', //默认透明
// shadowBlur: 10,
// length:'70%',
// width:10
// },
// detail : {
// show: false
// },
// // 钟表中央内容
// // data:[{value: 0, name: 'ROLEX'}]
// data:[{value: 0, name: ''}]
// },
// -------------------这个仅仅用于绘制表盘和刻度--------------------
{
name:'风速',
type:'gauge',
min:0,
max:360,
splitNumber:24,
radius: '60%',
startAngle:90,
endAngle:-269.999,
animation: 0,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[1, '#1e90ff']],
width: 0,
shadowColor : '#fff', //默认透明
shadowBlur: 10,
},
},
// 刻度数值字符控制
axisLabel: { // 坐标轴小标记
formatter: function(v) {
switch(v+''){
case '0':
case '360':return 'N';
case '90':return 'E';
case '180':return 'S';
case '270':return 'W';
default: return v;
}
},
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#ffffff',
shadowColor : '#ffffff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: '#ffffff00', // 隐藏刻度（小区间刻度）
shadowColor : '#ffffff', //默认透明
shadowBlur: 10
}
},
splitLine: { // 分隔线
length :25, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:3,
color: '#ffffff00', // 隐藏分隔线（大区间刻度）
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer: { // 分隔线
show: false
},
title : {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
detail : {
show: false
},
// 钟表中央内容
// data:[{value: 0, name: 'ROLEX'}]
data:[{value: 0, name: ''}]
}
]
};
function init() {
var d = new Date();
var h = d.getHours() >= 12 ? d.getHours() - 12 : d.getHours();
var m = d.getMinutes() / 5;
var s = d.getSeconds() / 5;
// -- 风向针
option.series[0].data[0].value = s.toFixed(1); // 风向外框
option.series[1].data[0].value = s.toFixed(1); // 风向箭头
option.series[2].data[0].value = s.toFixed(1); // 风向内的一个标志图标
// option.series[1].data[0].value = m.toFixed(1);;
// option.series[2].data[0].value = s.toFixed(1);
// option.series[1].data[0].value = s.toFixed(1);
myChart.setOption(option);
}
init()
// setInterval(function (){
// var d = new Date();
// var h = d.getHours() >= 12 ? d.getHours() - 12 : d.getHours();
// var m = d.getMinutes() / 5;
// var s = d.getSeconds() / 5;
// option.series[0].data[0].value = h;
// option.series[1].data[0].value = m.toFixed(1);;
// option.series[2].data[0].value = s.toFixed(1);
// myChart.setOption(option);
// },1000);
