汽车配件 html 特效,html5 echarts汽车仪表盘图表动画特效

特效描述：html5 echarts 汽车仪表盘图表动画特效，html5汽车仪表盘，第一次从使用echarts,如何调用js,CSS,测试

代码结构

1. 引入JS

2. HTML代码

// 基于准备好的dom，初始化echarts图表

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

var option = {

tooltip : {

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

toolbox: {

show : true,

feature : {

mark : {show: true},

restore : {show: true},

saveAsImage : {show: true}

}

series : [

{

name:'业务指标',

type:'gauge',

min:0,

max:200,

splitNumber: 10, // 分割段数，默认为5

axisLine: { // 坐标轴线

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

color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],

width: 8

}

axisTick: { // 坐标轴小标记

splitNumber: 10, // 每份split细分多少段

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

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

color: 'auto'

}

axisLabel: { // 坐标轴文本标签，详见axis.axisLabel

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

color: 'auto'

}

splitLine: { // 分隔线

show: true, // 默认显示，属性show控制显示与否

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

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

color: 'auto'

}

pointer : {

width : 5

title : {

show : true,

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

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

fontWeight: 'bolder'

}

detail : {

formatter:'{value}%',

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

color: 'auto',

fontWeight: 'bolder'

}

data:[{value: 50, name: '完成率'}]

}

]

};

// 为echarts对象加载数据

myChart.setOption(option);

setInterval(function (){

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

myChart.setOption(option,true);

},2000);

汽车配件 html 特效,html5 echarts汽车仪表盘图表动画特效相关推荐

html map热点特效,html5 svg卡通世界地图热点动画特效
特效描述:html5 svg 卡通世界地图热点动画特效.html5 svg绘制圆形世界地图热点线性动画展示特效. 代码结构 1. 引入JS 2. HTML代码 var select = functi ...
HTML做3D立体特效,html5 3D立体粒子波浪动画特效代码
特效描述:html5 3D立体粒子波浪动画.3D 粒子动画特效代码结构 1. 引入JS 2. HTML代码 /// Scene const sceneSettings = { width: () ...
如何设置HTML背景特效,HTML5之按钮背景不同动画特效设计
今天来给大家介绍一下HTML5,讲什么呢,讲讲一组效果非常酷的鼠标滑过按钮背景动画特效. 在该特效中,当鼠标滑过按钮时,使用CSS3 animation来动画background-size和backg ...
css3上升悬浮粒子特效,HTML5 CSS3星空背景悬浮粒子动画特效
CSS 语言: CSSSCSS 确定 /* Config */ /* Styles */ html, body { height: 100%; } body { display: -webkit-bo ...
html 萤火虫特效,html5杯子里萤火虫发光动画特效
js代码 var numP = 50; TweenMax.set("#content", {transformOrigin:"50% -45%"}) //Twe ...
html5倒计时效果,html5+css3进度条倒计时动画特效代码【推荐】
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
html进度条倒计时代码,html5+css3进度条倒计时动画特效代码【推荐】_html5教程技巧...
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
html 开关窗效果,逼真的HTML5+CSS3窗帘拉开收起动画特效
逼真的HTML5+CSS3窗帘拉开收起动画特效 html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inheri ...
HTML5实现的树叶飘落动画特效
以下是一个基于HTML5实现的树叶飘落动画特效: <!DOCTYPE html> <html> <head><title>树叶飘落动画特效</ti ...

汽车配件 html 特效,html5 echarts汽车仪表盘图表动画特效

汽车配件 html 特效,html5 echarts汽车仪表盘图表动画特效相关推荐

最新文章

热门文章

汽车 配件 html 特效,html5 echarts汽车仪表盘图表动画特效

汽车 配件 html 特效,html5 echarts汽车仪表盘图表动画特效相关推荐

最新文章

热门文章

汽车配件 html 特效,html5 echarts汽车仪表盘图表动画特效

汽车配件 html 特效,html5 echarts汽车仪表盘图表动画特效相关推荐