echart关系树状图_echart.js制作树状图饼状图；

// Step:3 conifg ECharts's path, link to echarts.js from current page.

// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径

require.config({

paths: {

// echarts: './js'

echarts: 'http://echarts.baidu.com/build/dist'

}

});

var idx = 1;

// Step:4 require echarts and use it in the callback.

// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径

require(

[

'echarts',

'echarts/chart/tree',

'echarts/chart/pie',

'echarts/chart/bar',

'echarts/chart/line',

'echarts/chart/map'

],

function (ec) {

//--- 折柱 ---

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

myChart.setOption({

tooltip: {

trigger: 'axis'

},

legend: {

data: ['违章次数', '扣分']

},

toolbox: {

show: false,

feature: {

mark: {show: true},

dataView: {show: true, readOnly: false},

magicType: {show: true, type: ['line', 'bar']},

restore: {show: true},

saveAsImage: {show: true}

}

},

calculable: true,

xAxis: [

{

type: 'category',

data: ['超速', '乱停', '11', '12', '1', '2', '3']

}

],

yAxis: [

{

type: 'value',

splitArea: {show: true}

}

],

series: [

{

name: '违章次数',

type: 'bar',

data: [2.0, 1, 1, 2, 1, 1, 1, 1, 1, 2, 4, 3]

},

{

name: '扣分',

type: 'bar',

data: [2.6, 2.9, 2.0, 2.4, 2.7, 2.7, 2, 2.2, 2.7, 2.8, 2, 2.3]

},

// {

// name:'违章类型',

// type:'bar',

// data:[2.6, 2.9, 2.0, 2.4, 2.7, 2.7, 2, 2, 2.7, 2.8, 6.0, 2.3]

// }

]

});

// --- 地图 ---

var myChart2 = ec.init(document.getElementById('mainMap'));

myChart2.setOption({

timeline: {

data: [

'1', '2', '3', '4', '5',

{name: '6', symbol: 'emptyStar6', symbolSize: 8},

'7', '8', '9', '10', '11',

{name: '12', symbol: 'star6', symbolSize: 8}

],

label: {

formatter: function (s) {

return s.slice(0, 7);

}

}

},

options: [

{

title: {

text: '扣分占比变化',

subtext: ''

},

tooltip: {

trigger: 'item',

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

},

legend: {

data: ['', '', '', '', '']

},

toolbox: {

show: false,

feature: {

mark: {show: false},

dataView: {show: false, readOnly: false},

magicType: {

show: false,

type: ['pie', 'funnel'],

option: {

funnel: {

x: '25%',

width: '50%',

funnelAlign: 'left',

max: 1700

}

}

},

restore: {show: false},

saveAsImage: {show: false}

}

},

series: [

{

name: '扣分',

type: 'pie',

center: ['50%', '45%'],

radius: '50%',

data: [

{value: idx * 128 + 80, name: 'Chrome'},

{value: idx * 64 + 160, name: 'Firefox'},

{value: idx * 32 + 320, name: 'Safari'},

{value: idx * 16 + 640, name: 'IE9+'},

{value: idx++ * 8 + 1280, name: 'IE8-'}

]

}

]

},

{

series: [

{

name: '扣分',

type: 'pie',

data: [

{value: idx * 128 + 80, name: 'Chrome'},

{value: idx * 64 + 160, name: 'Firefox'},

{value: idx * 32 + 320, name: 'Safari'},

{value: idx * 16 + 640, name: 'IE9+'},

{value: idx++ * 8 + 1280, name: 'IE8-'}

]

}

]

},

{

series: [

{

name: '扣分',

type: 'pie',

data: [

{value: idx * 128 + 80, name: 'Chrome'},

{value: idx * 64 + 160, name: 'Firefox'},

{value: idx * 32 + 320, name: 'Safari'},

{value: idx * 16 + 640, name: 'IE9+'},

{value: idx++ * 8 + 1280, name: 'IE8-'}

]

}

]

},

{

series: [

{

name: '扣分',

type: 'pie',

data: [

{value: idx * 128 + 80, name: 'Chrome'},

{value: idx * 64 + 160, name: 'Firefox'},

{value: idx * 32 + 320, name: 'Safari'},

{value: idx * 16 + 640, name: 'IE9+'},

{value: idx++ * 8 + 1280, name: 'IE8-'}

]

}

]

},

{

series: [

{

name: '扣分',

type: 'pie',

data: [

{value: idx * 128 + 80, name: 'Chrome'},

{value: idx * 64 + 160, name: 'Firefox'},

{value: idx * 32 + 320, name: 'Safari'},

{value: idx * 16 + 640, name: 'IE9+'},

{value: idx++ * 8 + 1280, name: 'IE8-'}

]

}

]

},

{

series: [

{

name: '扣分',

type: 'pie',

data: [

{value: idx * 128 + 80, name: 'Chrome'},

{value: idx * 64 + 160, name: 'Firefox'},

{value: idx * 32 + 320, name: 'Safari'},

{value: idx * 16 + 640, name: 'IE9+'},

{value: idx++ * 8 + 1280, name: 'IE8-'}

]

}

]

},

{

series: [

{

name: '扣分',

type: 'pie',

data: [

{value: idx * 128 + 80, name: 'Chrome'},

{value: idx * 64 + 160, name: 'Firefox'},

{value: idx * 32 + 320, name: 'Safari'},

{value: idx * 16 + 640, name: 'IE9+'},

{value: idx++ * 8 + 1280, name: 'IE8-'}

]

}

]

},

{

series: [

{

name: '扣分',

type: 'pie',

data: [

{value: idx * 128 + 80, name: 'Chrome'},

{value: idx * 64 + 160, name: 'Firefox'},

{value: idx * 32 + 320, name: 'Safari'},

{value: idx * 16 + 640, name: 'IE9+'},

{value: idx++ * 8 + 1280, name: 'IE8-'}

]

}

]

},

{

series: [

{

name: '扣分',

type: 'pie',

data: [

{value: idx * 128 + 80, name: 'Chrome'},

{value: idx * 64 + 160, name: 'Firefox'},

{value: idx * 32 + 320, name: 'Safari'},

{value: idx * 16 + 640, name: 'IE9+'},

{value: idx++ * 8 + 1280, name: 'IE8-'}

]

}

]

},

{

series: [

{

name: '扣分',

type: 'pie',

data: [

{value: idx * 128 + 80, name: 'Chrome'},

{value: idx * 64 + 160, name: 'Firefox'},

{value: idx * 32 + 320, name: 'Safari'},

{value: idx * 16 + 640, name: 'IE9+'},

{value: idx++ * 8 + 1280, name: 'IE8-'}

]

}

]

},

{

series: [

{

name: '扣分',

type: 'pie',

data: [

{value: idx * 128 + 80, name: 'Chrome'},

{value: idx * 64 + 160, name: 'Firefox'},

{value: idx * 32 + 320, name: 'Safari'},

{value: idx * 16 + 640, name: 'IE9+'},

{value: idx++ * 8 + 1280, name: 'IE8-'}

]

}

]

},

{

series: [

{

name: '扣分',

type: 'pie',

data: [

{value: idx * 128 + 80, name: 'Chrome'},

{value: idx * 64 + 160, name: 'Firefox'},

{value: idx * 32 + 320, name: 'Safari'},

{value: idx * 16 + 640, name: 'IE9+'},

{value: idx++ * 8 + 1280, name: 'IE8-'}

]

}

]

}

]

});

}

);