<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue-demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
</head>
<body>
<div id="app">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div ref="parent" style="width: 600px; height: 300px;"></div>
<div ref="child" style="width: 600px; height: 300px;"></div>
</div>
<script type="text/javascript">
var myVue = new Vue({
el : "#app",
data: {
dom: null,
childChart:"",
parentOption:{
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:[]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: false, readOnly: true},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '20%',
funnelAlign: 'center',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : ['50%', '70%'],
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true,
position : 'center',
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
}
},
data:[]
}
]
},
childOption:{
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: false, readOnly: true},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '20%',
funnelAlign: 'center',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : ['50%', '70%'],
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true,
position : 'center',
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
}
},
data:[]
}
]
}
},
mounted(){
////初始化父类图表
this.initParentCharts();
// //初始化子类图表
this.initChildChart();
var myColor = [
{
x: 0,
y: 0,
x2: 1,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 1,
color: "#d52437"
},
{
offset: 0,
color: "#f23857"
}
]
},
{
x: 0,
y: 0,
x2: 1,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 1,
color: "#f76a00"
},
{
offset: 0,
color: "#f78800"
}
]
},
{
x: 0,
y: 0,
x2: 1,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 1,
color: "#0ca979"
},
{
offset: 0,
color: "#2acc9b"
}
]
},
{
x: 0,
y: 0,
x2: 1,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 1,
color: "#0abfff"
},
{
offset: 0,
color: "#0194ff"
}
]
},
{
x: 0,
y: 0,
x2: 1,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 1,
color: "#9515e6"
},
{
offset: 0,
color: "#ad15e6"
}
]
},
{
x: 0,
y: 0,
x2: 1,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 1,
color: "#cd1072"
},
{
offset: 0,
color: "#d85297"
}
]
},
{
x: 0,
y: 0,
x2: 1,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 1,
color: "#fe3501"
},
{
offset: 0,
color: "#fd8f46"
}
]
},
{
x: 0,
y: 0,
x2: 1,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 1,
color: "#232dc0"
},
{
offset: 0,
color: "#4453c6"
}
]
}
];
this.$nextTick(() => {
let option = {
grid: {
top: "10",
right: "40",
left: "60",
bottom: "40"
},
xAxis: {
show: false
},
yAxis: [
{
show: true,
data: this.titlename,
inverse: true,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#fff",
fontSize: 14
},
formatter: function(value, index) {
return ["{title|" + value + "} "].join("\n");
},
rich: {}
}
},
{
show: true,
inverse: true,
data: this.valdata,
axisLabel: {
textStyle: {
color: "#fff",
fontSize: 14
}
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}
],
series: [
{
name: "条",
type: "bar",
yAxisIndex: 0,
data: this.data,
barWidth: 12,
itemStyle: {
normal: {
barBorderRadius: 0,
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num];
}
}
}
// label: {
// normal: {
// show: true,
// position: 'inside',
// formatter: '{c}%'
// }
// },
}
],
animation: true
};
this.dom = echarts.init(this.$refs.dom, "tdTheme");
this.dom.setOption(option);
on(window, "resize", this.resize);
});
},
methods: {
//初始化数据
initDataArray(){
var dataArray=new Array();
//父类数据
dataArray.push({value:335, name:'直接访问',id:1001,parentId:0});
dataArray.push({value:310, name:'邮件营销',id:2001,parentId:0});
dataArray.push({value:234, name:'联盟广告',id:3001,parentId:0});
dataArray.push({value:135, name:'视频广告',id:4001,parentId:0});
//子类数据
dataArray.push({value:90, name:'直接访问01',id:100101,parentId:1001});
dataArray.push({value:12, name:'直接访问02',id:100102,parentId:1001});
dataArray.push({value:440, name:'直接访问03',id:100103,parentId:1001});
dataArray.push({value:100, name:'直接访问04',id:100104,parentId:1001});
dataArray.push({value:58, name:'直接访问05',id:100105,parentId:1001});
dataArray.push({value:90, name:'邮件营销01',id:200101,parentId:2001});
dataArray.push({value:12, name:'邮件营销02',id:200102,parentId:2001});
dataArray.push({value:440, name:'邮件营销03',id:200103,parentId:2001});
dataArray.push({value:190, name:'联盟广告01',id:300101,parentId:3001});
dataArray.push({value:12, name:'联盟广告02',id:300102,parentId:3001});
dataArray.push({value:90, name:'视频广告01',id:400101,parentId:4001});
dataArray.push({value:12, name:'视频广告02',id:400102,parentId:4001});
dataArray.push({value:440, name:'视频广告03',id:400103,parentId:4001});
dataArray.push({value:100, name:'视频广告04',id:400104,parentId:4001});
dataArray.push({value:58, name:'视频广告05',id:400105,parentId:4001});
dataArray.push({value:158, name:'视频广告06',id:400106,parentId:4001});
return dataArray;
},
initParentData(){
var dataArray=this.initDataArray();
var dataParentArray=new Array();
for(var i=0;i<dataArray.length;i++){
if(dataArray[i].parentId==0){
dataParentArray.push(dataArray[i]);
}
}
return dataParentArray;
},
initParentLegend(){
var dataArray=this.initDataArray();
var legendArray=new Array();
for(var i=0;i<dataArray.length;i++){
if(dataArray[i].parentId==0){
legendArray.push(dataArray[i].name);
}
}
return legendArray;
},
//初始化父类图表
initParentCharts(){
// 基于准备好的dom，初始化echarts实例
var parentChart = echarts.init(this.$refs['parent']);
// 设置父类头部数据。
this.parentOption.legend.data=this.initParentLegend();
this.parentOption.series[0].data=this.initParentData();
parentChart.setOption(this.parentOption);
//添加点击事件
parentChart.on("click", this.initChildData);
},
//初始化子类图表
initChildChart(){
// 子图展示
this.childChart = echarts.init(this.$refs['child']);
// 默认使用父类数据展示
this.childOption.series[0].data=this.initParentData();
this.childChart.setOption(this.childOption);
},
//初始化子类数据
initChildData(param){
var id = this.parentOption.series[param.seriesIndex].data[param.dataIndex].id;
var dataArray=this.initDataArray();
//初始化子图数据
var dataChildArray=new Array();
for(var i=0;i<dataArray.length;i++){
if(dataArray[i].parentId==id){
dataChildArray.push(dataArray[i]);
}
}
this.childOption.series[0].data=dataChildArray;
this.childChart.setOption(this.childOption);
}
}
})
</script>
</body>
</html>
