|
|
@@ -1,98 +1,242 @@
|
|
|
// 柱状图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 myChart = echarts.init(document.querySelector(".bar-3d .chart"));
|
|
|
+
|
|
|
+ // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
|
|
+ function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
|
|
|
+
|
|
|
+ // 计算
|
|
|
+ let midRatio = (startRatio + endRatio) / 2;
|
|
|
+
|
|
|
+ let startRadian = startRatio * Math.PI * 2;
|
|
|
+ let endRadian = endRatio * Math.PI * 2;
|
|
|
+ let midRadian = midRatio * Math.PI * 2;
|
|
|
+
|
|
|
+ // 如果只有一个扇形，则不实现选中效果。
|
|
|
+ if (startRatio === 0 && endRatio === 1) {
|
|
|
+ isSelected = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
|
|
+ k = typeof k !== 'undefined' ? k : 1 / 3;
|
|
|
+
|
|
|
+ // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
|
|
+ let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
|
|
+ let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
|
|
+
|
|
|
+ // 计算高亮效果的放大比例（未高亮，则比例为 1）
|
|
|
+ let hoverRate = isHovered ? 1.05 : 1;
|
|
|
+
|
|
|
+ // 返回曲面参数方程
|
|
|
+ return {
|
|
|
+
|
|
|
+ u: {
|
|
|
+ min: -Math.PI,
|
|
|
+ max: Math.PI * 3,
|
|
|
+ step: Math.PI / 32
|
|
|
+ },
|
|
|
+
|
|
|
+ v: {
|
|
|
+ min: 0,
|
|
|
+ max: Math.PI * 2,
|
|
|
+ step: Math.PI / 20
|
|
|
+ },
|
|
|
+
|
|
|
+ x: function(u, v) {
|
|
|
+ if (u < startRadian) {
|
|
|
+ return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
+ }
|
|
|
+ if (u > endRadian) {
|
|
|
+ return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
+ }
|
|
|
+ return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
+ },
|
|
|
+
|
|
|
+ y: function(u, v) {
|
|
|
+ if (u < startRadian) {
|
|
|
+ return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
+ }
|
|
|
+ if (u > endRadian) {
|
|
|
+ return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
+ }
|
|
|
+ return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
+ },
|
|
|
+
|
|
|
+ z: function(u, v) {
|
|
|
+ if (u < -Math.PI * 0.5) {
|
|
|
+ return Math.sin(u);
|
|
|
+ }
|
|
|
+ if (u > Math.PI * 2.5) {
|
|
|
+ return Math.sin(u);
|
|
|
+ }
|
|
|
+ return Math.sin(v) > 0 ? 1 : -1;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ // 生成模拟 3D 饼图的配置项
|
|
|
+ function getPie3D(pieData, internalDiameterRatio) {
|
|
|
+
|
|
|
+ let series = [];
|
|
|
+ let sumValue = 0;
|
|
|
+ let startValue = 0;
|
|
|
+ let endValue = 0;
|
|
|
+ let legendData = [];
|
|
|
+ let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
|
|
|
+
|
|
|
+ // 为每一个饼图数据，生成一个 series-surface 配置
|
|
|
+ for (let i = 0; i < pieData.length; i++) {
|
|
|
+
|
|
|
+ sumValue += pieData[i].value;
|
|
|
+
|
|
|
+ let seriesItem = {
|
|
|
+ name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
|
|
|
+ type: 'surface',
|
|
|
+ parametric: true,
|
|
|
+ wireframe: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ pieData: pieData[i],
|
|
|
+ pieStatus: {
|
|
|
+ selected: false,
|
|
|
+ hovered: false,
|
|
|
+ k: k
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ if (typeof pieData[i].itemStyle != 'undefined') {
|
|
|
+
|
|
|
+ let itemStyle = {};
|
|
|
+
|
|
|
+ typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
|
|
|
+ typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
|
|
|
+
|
|
|
+ seriesItem.itemStyle = itemStyle;
|
|
|
+ }
|
|
|
+ series.push(seriesItem);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
|
|
+ // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
|
|
+ for (let i = 0; i < series.length; i++) {
|
|
|
+ endValue = startValue + series[i].pieData.value;
|
|
|
+ console.log(series[i]);
|
|
|
+ series[i].pieData.startRatio = startValue / sumValue;
|
|
|
+ series[i].pieData.endRatio = endValue / sumValue;
|
|
|
+ series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
|
|
|
+
|
|
|
+ startValue = endValue;
|
|
|
+
|
|
|
+ legendData.push(series[i].name);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 准备待返回的配置项，把准备好的 legendData、series 传入。
|
|
|
+ let option = {
|
|
|
+
|
|
|
+ // globe:{
|
|
|
+ // baseTexture: "../img/world.jpg",
|
|
|
+ // heightTexture: "../img/world.jpg",
|
|
|
+ // displacementScale: 0.04,
|
|
|
+ // environment: "../img/starfield.jpg",
|
|
|
+ // shading:"realistic",
|
|
|
+ // realisticMaterial: {
|
|
|
+ // roughness: 0.9
|
|
|
+ // },
|
|
|
+ // postEffect: {
|
|
|
+ // enable: true
|
|
|
+ // },
|
|
|
+ // light: {
|
|
|
+ // main: {
|
|
|
+ // intensity: 5,
|
|
|
+ // shadow: true
|
|
|
+ // },
|
|
|
+ // ambientCubemap: {
|
|
|
+ // texture: "../img/pisa.hdr",
|
|
|
+ // diffuseIntensity: 0.2
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ tooltip: {
|
|
|
+ formatter: params => {
|
|
|
+ if (params.seriesName !== 'mouseoutSeries') {
|
|
|
+ return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}%`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // legend: {
|
|
|
+ // data: legendData,
|
|
|
+ // textStyle: {
|
|
|
+ // color: '#fff',
|
|
|
+ // fontSize: 14
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ xAxis3D: {
|
|
|
+ min: -1,
|
|
|
+ max: 1
|
|
|
+ },
|
|
|
+ yAxis3D: {
|
|
|
+ min: -1,
|
|
|
+ max: 1
|
|
|
+ },
|
|
|
+ zAxis3D: {
|
|
|
+ min: -1,
|
|
|
+ max: 1
|
|
|
+ },
|
|
|
+ grid3D: {
|
|
|
+
|
|
|
+
|
|
|
+ show: false,
|
|
|
+ boxHeight: 40,
|
|
|
+ top: '-10%',
|
|
|
+ // bottom: '80%',
|
|
|
+ // environment: '../images/3d-bg.png', //aa背景色
|
|
|
+
|
|
|
+ viewControl: {
|
|
|
+ distance: 170, //aa距离
|
|
|
+ alpha: 21, //aa角度
|
|
|
+ beta: 10, //aa角度
|
|
|
+ zoomSensitivity: false //是否开启缩放和平移
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: series
|
|
|
+ };
|
|
|
+ return option;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 传入数据生成 option
|
|
|
+ var option = getPie3D([{
|
|
|
+ name: '已处理率',
|
|
|
+ value: 80,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.5,
|
|
|
+ color: 'rgba(0,127,244,.8)',
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ name: '未处理率',
|
|
|
+ value: 20,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.5,
|
|
|
+ color: 'rgba(209,126,23,.8)',
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ], 2);
|
|
|
+
|
|
|
+ // 把配置给实例对象
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.addEventListener("resize", function() {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
+
|
|
|
+})();
|
|
|
|
|
|
|
|
|
// 折线图定制 (数据离散率挖掘)
|
|
|
@@ -186,21 +330,20 @@
|
|
|
|
|
|
],
|
|
|
// color: ["#FF9C00", "#0096FF", "#11F90C"], // 通过这个color修改两条线的颜色
|
|
|
+ // tooltip: {
|
|
|
+ // trigger: "axis",
|
|
|
+ // // backgroundColor: '#12DFE0',
|
|
|
+ // textStyle: {
|
|
|
+ // align: 'left' //图例左对齐
|
|
|
+ // },
|
|
|
+ // },
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
- // backgroundColor: '#12DFE0',
|
|
|
textStyle: {
|
|
|
align: 'left' //图例左对齐
|
|
|
},
|
|
|
- // formatter(params) {
|
|
|
- // for (x in params) {
|
|
|
- // return params[x].name + ":" + params[x].data.value + "/" + params[x].data.date;
|
|
|
- // }
|
|
|
-
|
|
|
- // }
|
|
|
- // formatter: "{b} {c}"
|
|
|
-
|
|
|
-
|
|
|
+ backgroundColor: '#12DFE0',
|
|
|
+ formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：2021年3月{b}日'
|
|
|
|
|
|
},
|
|
|
legend: {
|
|
|
@@ -352,12 +495,19 @@
|
|
|
var option = {
|
|
|
|
|
|
color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
|
|
|
+ // tooltip: {
|
|
|
+ // trigger: "axis",
|
|
|
+ // textStyle: {
|
|
|
+ // align: 'left' //图例左对齐
|
|
|
+ // },
|
|
|
+ // },
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
textStyle: {
|
|
|
align: 'left' //图例左对齐
|
|
|
},
|
|
|
-
|
|
|
+ backgroundColor: '#12DFE0',
|
|
|
+ formatter: '{a0}: {c0}<br />{a1}: {c1}<br />时间：2021年3月{b}日'
|
|
|
|
|
|
},
|
|
|
legend: {
|
|
|
@@ -524,7 +674,7 @@
|
|
|
align: 'left' //图例左对齐
|
|
|
},
|
|
|
backgroundColor: '#12DFE0',
|
|
|
- formatter: '{a0}: {c0}°C<br />{a1}: {c1}°C<br />{a2}: {c2}°C<br />时间2021年3月：{b}日'
|
|
|
+ formatter: '{a0}: {c0}°C<br />{a1}: {c1}°C<br />{a2}: {c2}°C<br />时间：2021年3月{b}日'
|
|
|
|
|
|
},
|
|
|
legend: {
|
|
|
@@ -670,521 +820,4 @@
|
|
|
});
|
|
|
|
|
|
|
|
|
-})();
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-// 饼形图定制
|
|
|
-// 折线图定制
|
|
|
-// (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();
|
|
|
-// });
|
|
|
-// })();
|
|
|
+})();
|
ming
