效果如上
//实现文章分类图
//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);
}