HTML-echart实现仪表图

效果如上



//实现文章分类图

//index_point为要显示的位置的对应case的下标值

function services_maintitle_container(index_point)
{



        //获得一个div,用来放图像(基本要求自己看echart的官网介绍)

var dom = document.getElementById("services_maintitle_container");
var myChart = echarts.init(dom);
option = {
   tooltip : {
       formatter: "{a} <br/>{c} {b}"
   },
   toolbox: {
       show: true,
       feature: {
           restore: {show: true},
           saveAsImage: {show: true}
       }
   },


   //1、国际 2、体育 3、娱乐 4、社会 5、财经 6、时事 7、科技 8、情感 
   //9、汽车 10、教育 11、时尚 12、游戏 13、军事 14、旅游 15、美食 
   //16、文化 17、健康养生 18、搞笑 19、家居 20、动漫 21、宠物 22、母婴育儿 
   //23、星座运势 24、历史 25、音乐 26、综合    
   series : [
       {
           name: '油表',
           type: 'gauge',
           min: 0,
           max: 25,
           splitNumber: 25,
           
           axisLine: {            // 坐标轴线
               lineStyle: {       // 属性lineStyle控制线条样式
                   width: 18
               }
           },
           //缩在里面的标线
           axisTick: {            // 坐标轴小标记
               splitNumber: 15,     //缩在里面的标线的宽度
               length: 20,        // //缩在里面的标线的长度
               lineStyle: {        // 属性lineStyle控制线条样式
                   color: 'auto'
               }
           },
           axisLabel: {
               formatter:function(v){
                   switch (v + '') {
                       case '0' : return '国际';
                       case '1' : return '体育';
                       case '2' : return '娱乐';
                       case '3' : return '社会';
                       case '4' : return '财经';
                       case '5' : return '时事';
                       case '6' : return '科技';
                       case '7' : return '情感';
                       case '8' : return '汽车';
                       case '9' : return '教育';
                       case '10' : return '时尚';
                       case '11' : return '游戏';
                       case '12' : return '军事';
                       case '13' : return '旅游';
                       case '14' : return '美食';
                       case '15' : return '文化';
                       case '16' : return '健康养生';
                       case '17' : return '搞笑';
                       case '18' : return '家居';
                       case '19' : return '动漫';
                       case '20' : return '宠物';
                       case '21' : return '母婴育儿';
                       case '22' : return '星座运势';
                       case '23' : return '历史';
                       case '24' : return '音乐';
                       case '25' : return '综合';
                   }


               }
           },
           
           //突出来一点的那根线
           splitLine: {           // 分隔线
               length: 26,         // 属性length控制线长
               lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                   color: 'auto'
               }
           },
           
           //指针的宽度
           pointer: {
               width:2
           },
           
           title : {
               show: false
           },
           detail : {
               show: false
           },
           
           data:[{value: index_point, name: '文章分类'}]
       }
   ]
};

myChart.setOption(option);
}