// 柱状图1模块
(function() {
// 实例化对象
var myChart = echarts.init(document.querySelector(".bar .chart"));
// 指定配置和数据
var option = {
color: ["#2f89cf"],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
},
xAxis: [{
type: "category",
data: [
"旅游行业",
"教育培训",
"游戏行业",
"医疗行业",
"电商行业",
"社交行业",
"金融行业"
],
axisTick: {
alignWithLabel: true
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
axisLine: {
show: false
}
}],
yAxis: [{
type: "value",
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
// width: 1,
// type: "solid"
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
}],
series: [{
name: "直接访问",
type: "bar",
barWidth: "35%",
data: [200, 300, 300, 900, 1500, 1200, 600],
itemStyle: {
barBorderRadius: 5
}
}]
};
// 把配置给实例对象
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
// 数据变化
var dataAll = [
{ year: "2019", data: [200, 300, 300, 900, 1500, 1200, 600] },
{ year: "2020", data: [300, 400, 350, 800, 1800, 1400, 700] }
];
$(".bar h2 ").on("click", "a", function() {
option.series[0].data = dataAll[$(this).index()].data;
myChart.setOption(option);
});
})();
// 折线图定制 (数据离散率挖掘)
(function() {
var sortData = [{
sortName: "三相电压",
data: [
// 两个数组是因为有两条线
[30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 200, 180, 79, 82, 64, 43, 60, 19, 82, 64, 43, 60, 19, 34],
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
[400, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
]
},
{
sortName: "三相电流",
data: [
// 两个数组是因为有两条线
[143, 19, 34, 40, 64, 191, 324, 290, 330, 310, 131, 165, 123, 178, 21, 82, 64, 43, 60, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ],
[24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
]
},
{
sortName: "三相温度",
data: [
// 两个数组是因为有两条线
[24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
[131, 165, 123, 178, 21, 82, 64, 43, 60, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ]
]
}, {
sortName: "漏电电流",
data: [
// 两个数组是因为有两条线
[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ],
[120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
]
},
];
var xData = function() {
var data = [];
for (var i = 1; i < 31; i++) {
data.push(i);
}
return data;
}();
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".divergence .chart"));
// 2.指定配置
var option = {
color: [{
colorStops: [{
offset: 0,
color: '#F9860C' // 0% 处的颜色
}, {
offset: 1,
color: '#fff' // 100% 处的颜色
}],
},
{
colorStops: [{
offset: 0,
color: '#07E1F1' // 0% 处的颜色
}, {
offset: 1,
color: '#0456CB' // 100% 处的颜色
}],
},
{
colorStops: [{
offset: 0,
color: '#11F90C' // 0% 处的颜色
}, {
offset: 1,
color: '#3FC713' // 100% 处的颜色
}],
}
],
// color: ["#FF9C00", "#0096FF", "#11F90C"], // 通过这个color修改两条线的颜色
tooltip: {
trigger: "axis",
backgroundColor: '#12DFE0',
textStyle: {
align: 'left' //图例左对齐
},
},
legend: {
// 如果series 对象有name 值，则 legend可以不用写data
itemGap: 20,
itemHeight: 2,
itemWidth: 15,
icon: 'rect',
textStyle: {
color: "#fff"
},
top: "bottom",
},
grid: {
top: "0%",
left: "1%",
right: "1%",
bottom: "15%",
show: true, // 显示边框
borderWidth: '0', //去除边框
containLabel: true // 包含刻度文字在内
},
xAxis: {
type: "category",
boundaryGap: false,
data: xData,
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: "#AADDFF" // 文本颜色
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
splitNumber: 8,
splitLine: {
show: false
},
splitArea: {
show: true,
areaStyle: {
color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
}
}
},
yAxis: {
type: "value",
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
show: false // 去除文本
},
axisLine: {
show: false // 去除轴线
},
splitLine: {
lineStyle: {
color: "#012f4a" // 分割线颜色
}
}
},
series: [{
symbol: "none",
name: "方差",
type: "line",
data: sortData[0].data[0]
},
{
symbol: "none",
name: "标准差",
type: "line",
data: sortData[0].data[1]
}, {
symbol: "none",
name: "平均值",
type: "line",
data: sortData[0].data[2]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
// 点击切换效果
$(".divergence .tab-line").on("click", "a", function() {
$(this).addClass('active').siblings().removeClass('active')
var obj = sortData[$(this).index()];
option.series[0].data = obj.data[0];
option.series[1].data = obj.data[1];
option.series[2].data = obj.data[2];
// 重新渲染
myChart.setOption(option);
});
})();
// 折线图定制 (电老化分析)
(function() {
var sortData = [{
sortName: "异常设备",
data: [
// 两个数组是因为有两条线
[24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
]
},
{
sortName: "漏电告警",
data: [
// 两个数组是因为有两条线
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ]
]
}
];
var xData = function() {
var data = [];
for (var i = 1; i < 31; i++) {
data.push(i);
}
return data;
}();
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".oldAnalysis .chart"));
// 2.指定配置
var option = {
color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
tooltip: {
trigger: "axis",
textStyle: {
align: 'left' //图例左对齐
},
},
legend: {
// 如果series 对象有name 值，则 legend可以不用写data
itemGap: 20,
itemHeight: 2,
itemWidth: 15,
icon: 'rect',
textStyle: {
color: "#fff"
},
top: "bottom",
},
grid: {
top: "0%",
left: "1%",
right: "1%",
bottom: "15%",
show: true, // 显示边框
borderWidth: '0', //去除边框
containLabel: true // 包含刻度文字在内
},
xAxis: {
type: "category",
boundaryGap: false,
data: xData,
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: "#AADDFF" // 文本颜色
},
axisLine: {
show: false // 去除轴线
}
},
yAxis: {
type: "value",
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
show: false // 去除文本
},
axisLine: {
show: false // 去除轴线
},
splitLine: {
lineStyle: {
color: "#012f4a" // 分割线颜色
}
}
},
series: [{
symbol: "none",
name: "电流",
type: "line",
smooth: true, // true 可以让我们的折线显示带有弧度
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(255,156,0, 0.4)"
},
{
offset: 0.8,
color: "rgba(255,156,0, 0.3)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
}
},
data: sortData[0].data[0]
},
{
symbol: "none",
name: "电压",
type: "line",
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(0,150,255,0.5)"
},
{
offset: 0.8,
color: "rgba(0,150,255, 0.1)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
}
},
data: sortData[0].data[1]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
// 点击切换效果
$(".oldAnalysis .tab-line").on("click", "a", function() {
$(this).addClass('active').siblings().removeClass('active')
var obj = sortData[$(this).index()];
option.series[0].data = obj.data[0];
option.series[1].data = obj.data[1];
// 重新渲染
myChart.setOption(option);
});
})();
// 折线图定制 (热老化分析)
(function() {
var sortData = [{
data: [
// 三个数组是因为有3条线
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
[24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
]
}];
var xData = function() {
var data = [];
for (var i = 1; i < 31; i++) {
data.push(i);
}
return data;
}();
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".hotAnalysis .chart"));
// 2.指定配置
var option = {
color: ["#05EEE7", "#9999FF", "#FE92B3"], // 通过这个color修改三条线的颜色
tooltip: {
trigger: "axis",
textStyle: {
align: 'left' //图例左对齐
}
},
legend: {
// 如果series 对象有name 值，则 legend可以不用写data
itemGap: 20,
itemHeight: 2,
itemWidth: 15,
icon: 'rect',
textStyle: {
color: "#fff"
},
top: "bottom",
},
grid: {
top: "0%",
left: "1%",
right: "1%",
bottom: "15%",
show: true, // 显示边框
borderWidth: '0', //去除边框
containLabel: true // 包含刻度文字在内
},
xAxis: {
type: "category",
boundaryGap: false,
data: xData,
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: "#AADDFF" // 文本颜色
},
axisLine: {
show: false // 去除轴线
}
},
yAxis: {
type: "value",
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
show: false // 去除文本
},
axisLine: {
show: false // 去除轴线
},
splitLine: {
lineStyle: {
color: "#012f4a" // 分割线颜色
}
}
},
series: [{
symbol: "none",
name: "线缆产生的温度",
type: "line",
smooth: true, // true 可以让我们的折线显示带有弧度
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(5,238,231,.6)"
},
{
offset: 0.8,
color: "rgba(5,238,231, 0.4)"
}
],
false
),
}
},
data: sortData[0].data[0]
},
{
symbol: "none",
name: "环境温度",
type: "line",
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(153,153,255,.6)"
},
{
offset: 0.8,
color: "rgba(153,153,255, 0.4)"
}
],
false
),
}
},
data: sortData[0].data[1]
},
{
symbol: "none",
name: "线缆温度",
type: "line",
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(255,147,180,.6)"
},
{
offset: 0.8,
color: "rgba(255,147,180, 0.4)"
}
],
false
),
}
},
data: sortData[0].data[2]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
})();
// 饼形图定制
// 折线图定制
// (function() {
// // 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.querySelector(".pie .chart"));
// option = {
// tooltip: {
// trigger: "item",
// formatter: "{a}
{b}: {c} ({d}%)",
// position: function(p) {
// //其中p为当前鼠标的位置
// return [p[0] + 10, p[1] - 10];
// }
// },
// legend: {
// top: "90%",
// itemWidth: 10,
// itemHeight: 10,
// data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
// textStyle: {
// color: "rgba(255,255,255,.5)",
// fontSize: "12"
// }
// },
// series: [{
// name: "年龄分布",
// type: "pie",
// center: ["50%", "42%"],
// radius: ["40%", "60%"],
// color: [
// "#065aab",
// "#066eab",
// "#0682ab",
// "#0696ab",
// "#06a0ab",
// "#06b4ab",
// "#06c8ab",
// "#06dcab",
// "#06f0ab"
// ],
// label: { show: false },
// labelLine: { show: false },
// data: [
// { value: 1, name: "0岁以下" },
// { value: 4, name: "20-29岁" },
// { value: 2, name: "30-39岁" },
// { value: 2, name: "40-49岁" },
// { value: 1, name: "50岁以上" }
// ]
// }]
// };
// // 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// window.addEventListener("resize", function() {
// myChart.resize();
// });
// // 点击切换显示数据
// $(".line h2").on("click", "a", function() {
// // 点击a之后，根据当前的a的索引号，找到对应的yearData的数据
// var obj = yearData[$(this).index()];
// option.series[0].data = obj.data[0];
// option.series[1].data = obj.data[1];
// // 重新渲染数据
// myChart.setOption(option);
// });
// })();
// 学习进度柱状图模块
// (function() {
// // 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.querySelector(".bar1 .chart"));
// var data = [70, 34, 60, 78, 69];
// var titlename = ["HTML5", "CSS3", "javascript", "VUE", "NODE"];
// var valdata = [702, 350, 610, 793, 664];
// var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// option = {
// //图标位置
// grid: {
// top: "10%",
// left: "22%",
// bottom: "10%"
// },
// xAxis: {
// show: false
// },
// yAxis: [{
// show: true,
// data: titlename,
// inverse: true,
// axisLine: {
// show: false
// },
// splitLine: {
// show: false
// },
// axisTick: {
// show: false
// },
// axisLabel: {
// color: "#fff",
// rich: {
// lg: {
// backgroundColor: "#339911",
// color: "#fff",
// borderRadius: 15,
// // padding: 5,
// align: "center",
// width: 15,
// height: 15
// }
// }
// }
// },
// {
// show: true,
// inverse: true,
// data: valdata,
// axisLabel: {
// textStyle: {
// fontSize: 12,
// color: "#fff"
// }
// }
// }
// ],
// series: [{
// name: "条",
// type: "bar",
// yAxisIndex: 0,
// data: data,
// barCategoryGap: 50,
// barWidth: 10,
// itemStyle: {
// normal: {
// barBorderRadius: 20,
// color: function(params) {
// var num = myColor.length;
// return myColor[params.dataIndex % num];
// }
// }
// },
// label: {
// normal: {
// show: true,
// position: "inside",
// formatter: "{c}%"
// }
// }
// },
// {
// name: "框",
// type: "bar",
// yAxisIndex: 1,
// barCategoryGap: 50,
// data: [100, 100, 100, 100, 100],
// barWidth: 15,
// itemStyle: {
// normal: {
// color: "none",
// borderColor: "#00c1de",
// borderWidth: 3,
// barBorderRadius: 15
// }
// }
// }
// ]
// };
// // 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// window.addEventListener("resize", function() {
// myChart.resize();
// });
// })();
// 折线图 优秀作品
// (function() {
// // 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.querySelector(".line1 .chart"));
// option = {
// tooltip: {
// trigger: "axis",
// axisPointer: {
// lineStyle: {
// color: "#dddc6b"
// }
// }
// },
// legend: {
// top: "0%",
// textStyle: {
// color: "rgba(255,255,255,.5)",
// fontSize: "12"
// }
// },
// grid: {
// left: "10",
// top: "30",
// right: "10",
// bottom: "10",
// containLabel: true
// },
// xAxis: [{
// type: "category",
// boundaryGap: false,
// axisLabel: {
// textStyle: {
// color: "rgba(255,255,255,.6)",
// fontSize: 12
// }
// },
// axisLine: {
// lineStyle: {
// color: "rgba(255,255,255,.2)"
// }
// },
// data: [
// "01",
// "02",
// "03",
// "04",
// "05",
// "06",
// "07",
// "08",
// "09",
// "11",
// "12",
// "13",
// "14",
// "15",
// "16",
// "17",
// "18",
// "19",
// "20",
// "21",
// "22",
// "23",
// "24",
// "25",
// "26",
// "27",
// "28",
// "29",
// "30"
// ]
// },
// {
// axisPointer: { show: false },
// axisLine: { show: false },
// position: "bottom",
// offset: 20
// }
// ],
// yAxis: [{
// type: "value",
// axisTick: { show: false },
// axisLine: {
// lineStyle: {
// color: "rgba(255,255,255,.1)"
// }
// },
// axisLabel: {
// textStyle: {
// color: "rgba(255,255,255,.6)",
// fontSize: 12
// }
// },
// splitLine: {
// lineStyle: {
// color: "rgba(255,255,255,.1)"
// }
// }
// }],
// series: [{
// name: "播放量",
// type: "line",
// smooth: true,
// symbol: "circle",
// symbolSize: 5,
// showSymbol: false,
// lineStyle: {
// normal: {
// color: "#0184d5",
// width: 2
// }
// },
// areaStyle: {
// normal: {
// color: new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1, [{
// offset: 0,
// color: "rgba(1, 132, 213, 0.4)"
// },
// {
// offset: 0.8,
// color: "rgba(1, 132, 213, 0.1)"
// }
// ],
// false
// ),
// shadowColor: "rgba(0, 0, 0, 0.1)"
// }
// },
// itemStyle: {
// normal: {
// color: "#0184d5",
// borderColor: "rgba(221, 220, 107, .1)",
// borderWidth: 12
// }
// },
// data: [
// 30,
// 40,
// 30,
// 40,
// 30,
// 40,
// 30,
// 60,
// 20,
// 40,
// 20,
// 40,
// 30,
// 40,
// 30,
// 40,
// 30,
// 40,
// 30,
// 60,
// 20,
// 40,
// 20,
// 40,
// 30,
// 60,
// 20,
// 40,
// 20,
// 40
// ]
// },
// {
// name: "转发量",
// type: "line",
// smooth: true,
// symbol: "circle",
// symbolSize: 5,
// showSymbol: false,
// lineStyle: {
// normal: {
// color: "#00d887",
// width: 2
// }
// },
// areaStyle: {
// normal: {
// color: new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1, [{
// offset: 0,
// color: "rgba(0, 216, 135, 0.4)"
// },
// {
// offset: 0.8,
// color: "rgba(0, 216, 135, 0.1)"
// }
// ],
// false
// ),
// shadowColor: "rgba(0, 0, 0, 0.1)"
// }
// },
// itemStyle: {
// normal: {
// color: "#00d887",
// borderColor: "rgba(221, 220, 107, .1)",
// borderWidth: 12
// }
// },
// data: [
// 50,
// 30,
// 50,
// 60,
// 10,
// 50,
// 30,
// 50,
// 60,
// 40,
// 60,
// 40,
// 80,
// 30,
// 50,
// 60,
// 10,
// 50,
// 30,
// 70,
// 20,
// 50,
// 10,
// 40,
// 50,
// 30,
// 70,
// 20,
// 50,
// 10,
// 40
// ]
// }
// ]
// };
// // 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// window.addEventListener("resize", function() {
// myChart.resize();
// });
// })();
// 点位分布统计模块
// (function() {
// // 1. 实例化对象
// var myChart = echarts.init(document.querySelector(".pie1 .chart"));
// // 2. 指定配置项和数据
// var option = {
// legend: {
// top: "90%",
// itemWidth: 10,
// itemHeight: 10,
// textStyle: {
// color: "rgba(255,255,255,.5)",
// fontSize: "12"
// }
// },
// tooltip: {
// trigger: "item",
// formatter: "{a}
{b} : {c} ({d}%)"
// },
// // 注意颜色写的位置
// color: [
// "#006cff",
// "#60cda0",
// "#ed8884",
// "#ff9f7f",
// "#0096ff",
// "#9fe6b8",
// "#32c5e9",
// "#1d9dff"
// ],
// series: [{
// name: "点位统计",
// type: "pie",
// // 如果radius是百分比则必须加引号
// radius: ["10%", "70%"],
// center: ["50%", "42%"],
// roseType: "radius",
// data: [
// { value: 20, name: "云南" },
// { value: 26, name: "北京" },
// { value: 24, name: "山东" },
// { value: 25, name: "河北" },
// { value: 20, name: "江苏" },
// { value: 25, name: "浙江" },
// { value: 30, name: "深圳" },
// { value: 42, name: "广东" }
// ],
// // 修饰饼形图文字相关的样式 label对象
// label: {
// fontSize: 10
// },
// // 修饰引导线样式
// labelLine: {
// // 连接到图形的线长度
// length: 10,
// // 连接到文字的线长度
// length2: 10
// }
// }]
// };
// // 3. 配置项和数据给我们的实例化对象
// myChart.setOption(option);
// // 4. 当我们浏览器缩放的时候，图表也等比例缩放
// window.addEventListener("resize", function() {
// // 让我们的图表调用 resize这个方法
// myChart.resize();
// });
// })();