|
|
@@ -1,729 +1,1178 @@
|
|
|
// 柱状图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"
|
|
|
- }
|
|
|
+ // 实例化对象
|
|
|
+ var myChart = echarts.init(document.querySelector(".bar .chart"));
|
|
|
+ // 指定配置和数据
|
|
|
+ var option = {
|
|
|
+ color: ["#2f89cf"],
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ }
|
|
|
},
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: "rgba(255,255,255,.1)"
|
|
|
- // width: 1,
|
|
|
- // type: "solid"
|
|
|
- }
|
|
|
+ grid: {
|
|
|
+ left: "0%",
|
|
|
+ top: "10px",
|
|
|
+ right: "0%",
|
|
|
+ bottom: "4%",
|
|
|
+ containLabel: true
|
|
|
},
|
|
|
- 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;
|
|
|
+ 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() {
|
|
|
- // 基于准备好的dom，初始化echarts实例
|
|
|
- var myChart = echarts.init(document.querySelector(".line .chart"));
|
|
|
-
|
|
|
- // (1)准备数据
|
|
|
- var data = {
|
|
|
- year: [
|
|
|
- [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
|
|
|
- [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- // 2. 指定配置和数据
|
|
|
- var option = {
|
|
|
- color: ["#00f2f1", "#ed3f35"],
|
|
|
- tooltip: {
|
|
|
- // 通过坐标轴来触发
|
|
|
- trigger: "axis"
|
|
|
- },
|
|
|
- legend: {
|
|
|
- // 距离容器10%
|
|
|
- right: "10%",
|
|
|
- // 修饰图例文字的颜色
|
|
|
- textStyle: {
|
|
|
- color: "#4c9bfd"
|
|
|
- }
|
|
|
- // 如果series 里面设置了name，此时图例组件的data可以省略
|
|
|
- // data: ["邮件营销", "联盟广告"]
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: "20%",
|
|
|
- left: "3%",
|
|
|
- right: "4%",
|
|
|
- bottom: "3%",
|
|
|
- show: true,
|
|
|
- borderColor: "#012f4a",
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
-
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- boundaryGap: false,
|
|
|
- data: [
|
|
|
- "1月",
|
|
|
- "2月",
|
|
|
- "3月",
|
|
|
- "4月",
|
|
|
- "5月",
|
|
|
- "6月",
|
|
|
- "7月",
|
|
|
- "8月",
|
|
|
- "9月",
|
|
|
- "10月",
|
|
|
- "11月",
|
|
|
- "12月"
|
|
|
- ],
|
|
|
- // 去除刻度
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- // 修饰刻度标签的颜色
|
|
|
- axisLabel: {
|
|
|
- color: "rgba(255,255,255,.7)"
|
|
|
- },
|
|
|
- // 去除x坐标轴的颜色
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: "value",
|
|
|
- // 去除刻度
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- // 修饰刻度标签的颜色
|
|
|
- axisLabel: {
|
|
|
- color: "rgba(255,255,255,.7)"
|
|
|
- },
|
|
|
- // 修改y轴分割线的颜色
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: "#012f4a"
|
|
|
+
|
|
|
+ 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);
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "新增粉丝",
|
|
|
- type: "line",
|
|
|
- stack: "总量",
|
|
|
- // 是否让线条圆滑显示
|
|
|
- smooth: true,
|
|
|
- data: data.year[0]
|
|
|
- },
|
|
|
- {
|
|
|
- name: "新增游客",
|
|
|
- type: "line",
|
|
|
- stack: "总量",
|
|
|
- smooth: true,
|
|
|
- data: data.year[1]
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- // 3. 把配置和数据给实例对象
|
|
|
- myChart.setOption(option);
|
|
|
-
|
|
|
- // 重新把配置好的新数据给实例对象
|
|
|
- myChart.setOption(option);
|
|
|
- window.addEventListener("resize", function() {
|
|
|
- myChart.resize();
|
|
|
- });
|
|
|
-})();
|
|
|
+ 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% 处的颜色
|
|
|
+ }],
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
-// 饼形图定制
|
|
|
-// 折线图定制
|
|
|
-(function() {
|
|
|
- // 基于准备好的dom，初始化echarts实例
|
|
|
- var myChart = echarts.init(document.querySelector(".pie .chart"));
|
|
|
-
|
|
|
- option = {
|
|
|
- tooltip: {
|
|
|
- trigger: "item",
|
|
|
- formatter: "{a} <br/>{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();
|
|
|
- });
|
|
|
-})();
|
|
|
-// 学习进度柱状图模块
|
|
|
-(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
|
|
|
+ // color: ["#FF9C00", "#0096FF", "#11F90C"], // 通过这个color修改两条线的颜色
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ backgroundColor: '#12DFE0',
|
|
|
+ textStyle: {
|
|
|
+ align: 'left' //图例左对齐
|
|
|
+ },
|
|
|
+
|
|
|
},
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
+ legend: {
|
|
|
+ // 如果series 对象有name 值，则 legend可以不用写data
|
|
|
+ itemGap: 20,
|
|
|
+ itemHeight: 2,
|
|
|
+ itemWidth: 15,
|
|
|
+ icon: 'rect',
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff"
|
|
|
+ },
|
|
|
+ top: "bottom",
|
|
|
},
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
+ grid: {
|
|
|
+ top: "0%",
|
|
|
+ left: "1%",
|
|
|
+ right: "1%",
|
|
|
+ bottom: "15%",
|
|
|
+ show: true, // 显示边框
|
|
|
+ borderWidth: '0', //去除边框
|
|
|
+ containLabel: true // 包含刻度文字在内
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
- color: "#fff",
|
|
|
-
|
|
|
- rich: {
|
|
|
- lg: {
|
|
|
- backgroundColor: "#339911",
|
|
|
- color: "#fff",
|
|
|
- borderRadius: 15,
|
|
|
- // padding: 5,
|
|
|
- align: "center",
|
|
|
- width: 15,
|
|
|
- height: 15
|
|
|
+
|
|
|
+ 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)"]
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- 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];
|
|
|
+ },
|
|
|
+
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisTick: {
|
|
|
+ show: false // 去除刻度线
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false // 去除文本
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false // 去除轴线
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#012f4a" // 分割线颜色
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
},
|
|
|
- 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();
|
|
|
- });
|
|
|
+ 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() {
|
|
|
- // 基于准备好的dom，初始化echarts实例
|
|
|
- var myChart = echarts.init(document.querySelector(".line1 .chart"));
|
|
|
-
|
|
|
- option = {
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- axisPointer: {
|
|
|
- lineStyle: {
|
|
|
- color: "#dddc6b"
|
|
|
+
|
|
|
+ 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);
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- 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
|
|
|
- }
|
|
|
+ return data;
|
|
|
+ }();
|
|
|
+
|
|
|
+ // 1. 实例化对象
|
|
|
+ var myChart = echarts.init(document.querySelector(".oldAnalysis .chart"));
|
|
|
+ // 2.指定配置
|
|
|
+ var option = {
|
|
|
+
|
|
|
+ color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ textStyle: {
|
|
|
+ align: 'left' //图例左对齐
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: "rgba(255,255,255,.2)"
|
|
|
- }
|
|
|
+ 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 // 包含刻度文字在内
|
|
|
},
|
|
|
|
|
|
- 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)"
|
|
|
- }
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: xData,
|
|
|
+ axisTick: {
|
|
|
+ show: false // 去除刻度线
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#AADDFF" // 文本颜色
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false // 去除轴线
|
|
|
+ }
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: "rgba(255,255,255,.6)",
|
|
|
- fontSize: 12
|
|
|
- }
|
|
|
+
|
|
|
+ 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);
|
|
|
+
|
|
|
+ });
|
|
|
+})();
|
|
|
+
|
|
|
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: "rgba(255,255,255,.1)"
|
|
|
- }
|
|
|
+// 折线图定制 (热老化分析)
|
|
|
+(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);
|
|
|
}
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "播放量",
|
|
|
- type: "line",
|
|
|
- smooth: true,
|
|
|
- symbol: "circle",
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- color: "#0184d5",
|
|
|
- width: 2
|
|
|
- }
|
|
|
+ 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' //图例左对齐
|
|
|
+ }
|
|
|
+
|
|
|
},
|
|
|
- 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)"
|
|
|
- }
|
|
|
+ legend: {
|
|
|
+ // 如果series 对象有name 值，则 legend可以不用写data
|
|
|
+ itemGap: 20,
|
|
|
+ itemHeight: 2,
|
|
|
+ itemWidth: 15,
|
|
|
+ icon: 'rect',
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff"
|
|
|
+ },
|
|
|
+ top: "bottom",
|
|
|
},
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: "#0184d5",
|
|
|
- borderColor: "rgba(221, 220, 107, .1)",
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
+ grid: {
|
|
|
+ top: "0%",
|
|
|
+ left: "1%",
|
|
|
+ right: "1%",
|
|
|
+ bottom: "15%",
|
|
|
+ show: true, // 显示边框
|
|
|
+ borderWidth: '0', //去除边框
|
|
|
+ containLabel: true // 包含刻度文字在内
|
|
|
},
|
|
|
- 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
|
|
|
- }
|
|
|
+
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: xData,
|
|
|
+ axisTick: {
|
|
|
+ show: false // 去除刻度线
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#AADDFF" // 文本颜色
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false // 去除轴线
|
|
|
+ }
|
|
|
},
|
|
|
- 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)"
|
|
|
+
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisTick: {
|
|
|
+ show: false // 去除刻度线
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false // 去除文本
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false // 去除轴线
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#012f4a" // 分割线颜色
|
|
|
}
|
|
|
- ],
|
|
|
- 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
|
|
|
+ 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();
|
|
|
- });
|
|
|
+ };
|
|
|
+
|
|
|
+ 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} <br/>{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} <br/>{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();
|
|
|
- });
|
|
|
-})();
|
|
|
+// (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} <br/>{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();
|
|
|
+// });
|
|
|
+// })();
|
ming
