echarts饼状图鼠标经过html,echarts饼状统计图示例源码

【实例简介】

【实例截图】

【核心代码】

echarts饼状统计图DEMO下载

教程：echarts饼状统计图DEMO下载

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

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

option = {

tooltip: {

trigger: 'item',

formatter: "{a}
{b}: {c} ({d}%)"

},

legend: {

orient: 'horizontal',

left: 'center',

bottom: 0,

data: ['直达', '其它外链', '搜索引擎', '直接输入网址或书签', 'shouce.ren', 'qq微博', '新浪微博', '百度', '谷歌', '邮箱', '必应', '其他']

},

series: [

{

name: '访问来源', //内环

type: 'pie',

selectedMode: 'single', //单一选中模式

radius: [0, '30%'], //饼图的半径 [内半径，外半径]

label: {

normal: {

position: 'inner' //内置文本标签

}

},

labelLine: {

normal: {

show: false //不需要设置引导线

}

},

data: [

{value: 335, name: '直达', selected: true},

{value: 679, name: '其它外链'},

{value: 1548, name: '搜索引擎'}

]

},

{

name: '访问来源',

type: 'pie',

radius: ['40%', '55%'],

data: [

{value: 335, name: '直接输入网址或书签'},

{value: 310, name: 'shouce.ren'},

{value: 234, name: '新浪微博'},

{value: 135, name: '微信'},

{value: 1048, name: '百度'},

{value: 251, name: '谷歌'},

{value: 147, name: '360'},

{value: 42, name: 'qq微博'},

{value: 60, name: '其他'}

]

}

]

};

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

chart_area.setOption(option);