echarts驾驶舱框架源码_ECharts仪表盘实例代码(附源码下载)

大家在汽车驾驶舱里一眼就可以看到仪表盘，使用使用Echarts制作的仪表盘可以轻松展示用户的数据，清晰的看出某个指标值所在的范围，仪表盘形式的报表应用在各种统计系统中，本文结合实例讲解仪表盘在销售任务完成率的统计应用。

HTML

首先引入Echarts，然后在需要放置图表的地方加上div#myChart，同时给它加上宽度和高度属性。

Javascript

接下来要初始化echarts实例，然后设置选项，最后渲染图像。

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

option = {

tooltip : {

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

},

series : [

{

name:'业务指标',

type:'gauge',

detail : {formatter:'{value}%'}, //仪表盘显示数据

axisLine: { //仪表盘轴线样式

lineStyle: {

width: 20

}

},

splitLine: { //分割线样式

length: 20

},

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

}

]

};