html心碎粒子特效,echarts8.html

后台登录-X-admin2.2

特别声明：ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。如需使用，详细了解可以访问官网 ECharts。 x-admin不承担任何版权问题。

注意：本案例的Echarts图表库由cdn引入，需要在线才能正常使用，如想离线，请至Echarts官网下载。

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

option = {

tooltip : {

formatter: "{a}
{c} {b}"

},

toolbox: {

show: true,

feature: {

restore: {show: true},

saveAsImage: {show: true}

}

},

series : [

{

name: '速度',

type: 'gauge',

z: 3,

min: 0,

max: 220,

splitNumber: 11,

radius: '50%',

axisLine: { // 坐标轴线

lineStyle: { // 属性lineStyle控制线条样式

width: 10

}

},

axisTick: { // 坐标轴小标记

length: 15, // 属性length控制线长

lineStyle: { // 属性lineStyle控制线条样式

color: 'auto'

}

},

splitLine: { // 分隔线

length: 20, // 属性length控制线长

lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式

color: 'auto'

}

},

title : {

textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE

fontWeight: 'bolder',

fontSize: 20,

fontStyle: 'italic'

}

},

detail : {

textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE

fontWeight: 'bolder'

}

},

data:[{value: 40, name: 'km/h'}]

},

{

name: '转速',

type: 'gauge',

center: ['20%', '55%'], // 默认全局居中

radius: '35%',

min:0,

max:7,

endAngle:45,

splitNumber:7,

axisLine: { // 坐标轴线

lineStyle: { // 属性lineStyle控制线条样式

width: 8

}

},

axisTick: { // 坐标轴小标记

length:12, // 属性length控制线长

lineStyle: { // 属性lineStyle控制线条样式

color: 'auto'

}

},

splitLine: { // 分隔线

length:20, // 属性length控制线长

lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式

color: 'auto'

}

},

pointer: {

width:5

},

title: {

offsetCenter: [0, '-30%'], // x, y，单位px

},

detail: {

textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE

fontWeight: 'bolder'

}

},

data:[{value: 1.5, name: 'x1000 r/min'}]

},

{

name: '油表',

type: 'gauge',

center: ['77%', '50%'], // 默认全局居中

radius: '25%',

min: 0,

max: 2,

startAngle: 135,

endAngle: 45,

splitNumber: 2,

axisLine: { // 坐标轴线

lineStyle: { // 属性lineStyle控制线条样式

width: 8

}

},

axisTick: { // 坐标轴小标记

splitNumber: 5,

length: 10, // 属性length控制线长

lineStyle: { // 属性lineStyle控制线条样式

color: 'auto'

}

},

axisLabel: {

formatter:function(v){

switch (v + '') {

case '0' : return 'E';

case '1' : return 'Gas';

case '2' : return 'F';

}

}

},

splitLine: { // 分隔线

length: 15, // 属性length控制线长

lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式

color: 'auto'

}

},

pointer: {

width:2

},

title : {

show: false

},

detail : {

show: false

},

data:[{value: 0.5, name: 'gas'}]

},

{

name: '水表',

type: 'gauge',

center : ['77%', '50%'], // 默认全局居中

radius : '25%',

min: 0,

max: 2,

startAngle: 315,

endAngle: 225,

splitNumber: 2,

axisLine: { // 坐标轴线

lineStyle: { // 属性lineStyle控制线条样式

width: 8

}

},

axisTick: { // 坐标轴小标记

show: false

},

axisLabel: {

formatter:function(v){

switch (v + '') {

case '0' : return 'H';

case '1' : return 'Water';

case '2' : return 'C';

}

}

},

splitLine: { // 分隔线

length: 15, // 属性length控制线长

lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式

color: 'auto'

}

},

pointer: {

width:2

},

title: {

show: false

},

detail: {

show: false

},

data:[{value: 0.5, name: 'gas'}]

}

]

};

setInterval(function (){

option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;

option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;

option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;

option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;

myChart.setOption(option,true);

},2000);

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

var _hmt = _hmt || [];

(function() {

var hm = document.createElement("script");

hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";

var s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(hm, s);

})();

一键复制

编辑

Web IDE

原始数据

按行查看

历史