|
|
@@ -0,0 +1,509 @@
|
|
|
+<template>
|
|
|
+ <view class="page">
|
|
|
+ <view class="chart" v-if="testData.length">
|
|
|
+ <cusEcharts :option="testOption"></cusEcharts>
|
|
|
+ </view>
|
|
|
+ <view class="chart" v-if="kxData.length">
|
|
|
+ <cusEcharts :option="kxOption"></cusEcharts>
|
|
|
+ </view>
|
|
|
+ <view class="chart" v-if="kxData2.length">
|
|
|
+ <cusEcharts :option="kxOption2"></cusEcharts>
|
|
|
+ </view>
|
|
|
+ <tabbar :tabbarIndex="2"></tabbar>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as echarts from "echarts";
|
|
|
+ import aqiData from '@/static/js/aqi-beijing.js'
|
|
|
+ export default {
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ testData:[],
|
|
|
+ testOption:null,
|
|
|
+ kxData:[],
|
|
|
+ kxOption:null,
|
|
|
+ kxData2:[],
|
|
|
+ kxOption2:null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ init(){
|
|
|
+ this.initTestChart();
|
|
|
+ this.initKxChart();
|
|
|
+ this.initKxChart2();
|
|
|
+ },
|
|
|
+ initTestChart(){
|
|
|
+ this.testData = [150, 230, 224, 218, 135, 147, 260];
|
|
|
+ this.testOption = {
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: this.testData,
|
|
|
+ type: 'line'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ initKxChart(){
|
|
|
+ this.kxData = [270,220,350,210,280,400];
|
|
|
+ const offsetX = 4;
|
|
|
+ const offsetY = 2;
|
|
|
+ // 绘制左侧面
|
|
|
+ const CubeLeft = echarts.graphic.extendShape({
|
|
|
+ shape: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ },
|
|
|
+ buildPath: function (ctx, shape) {
|
|
|
+ // 会canvas的应该都能看得懂，shape是从custom传入的
|
|
|
+ const xAxisPoint = shape.xAxisPoint;
|
|
|
+ const c0 = [shape.x, shape.y];
|
|
|
+ const c1 = [shape.x - offsetX, shape.y - offsetY];
|
|
|
+ const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
|
|
|
+ const c3 = [xAxisPoint[0], xAxisPoint[1]];
|
|
|
+ ctx
|
|
|
+ .moveTo(c0[0], c0[1])
|
|
|
+ .lineTo(c1[0], c1[1])
|
|
|
+ .lineTo(c2[0], c2[1])
|
|
|
+ .lineTo(c3[0], c3[1])
|
|
|
+ .closePath();
|
|
|
+ },
|
|
|
+ });
|
|
|
+ // 绘制右侧面
|
|
|
+ const CubeRight = echarts.graphic.extendShape({
|
|
|
+ shape: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ },
|
|
|
+ buildPath: function (ctx, shape) {
|
|
|
+ const xAxisPoint = shape.xAxisPoint;
|
|
|
+ const c1 = [shape.x, shape.y];
|
|
|
+ const c2 = [xAxisPoint[0], xAxisPoint[1]];
|
|
|
+ const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
|
|
|
+ const c4 = [shape.x + offsetX, shape.y - offsetY];
|
|
|
+ ctx
|
|
|
+ .moveTo(c1[0], c1[1])
|
|
|
+ .lineTo(c2[0], c2[1])
|
|
|
+ .lineTo(c3[0], c3[1])
|
|
|
+ .lineTo(c4[0], c4[1])
|
|
|
+ .closePath();
|
|
|
+ },
|
|
|
+ });
|
|
|
+ // 绘制顶面
|
|
|
+ const CubeTop = echarts.graphic.extendShape({
|
|
|
+ shape: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ },
|
|
|
+ buildPath: function (ctx, shape) {
|
|
|
+ const c1 = [shape.x, shape.y];
|
|
|
+ const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
|
|
|
+ const c3 = [shape.x, shape.y - offsetX];
|
|
|
+ const c4 = [shape.x - offsetX, shape.y - offsetY];
|
|
|
+ ctx
|
|
|
+ .moveTo(c1[0], c1[1])
|
|
|
+ .lineTo(c2[0], c2[1])
|
|
|
+ .lineTo(c3[0], c3[1])
|
|
|
+ .lineTo(c4[0], c4[1])
|
|
|
+ .closePath();
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // 注册三个面图形
|
|
|
+ echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
|
|
+ echarts.graphic.registerShape("CubeRight", CubeRight);
|
|
|
+ echarts.graphic.registerShape("CubeTop", CubeTop);
|
|
|
+
|
|
|
+ this.kxOption = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ backgroundColor: 'rgba(13,5,30,.6)',
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: '#4ddd8f',
|
|
|
+ padding: 5,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ right: 170,
|
|
|
+ top: 15,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#A7BFDE'
|
|
|
+ },
|
|
|
+ itemWidth: 6,
|
|
|
+ itemHeight: 8
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '4%',
|
|
|
+ right: '3%',
|
|
|
+ top: '25%',
|
|
|
+ bottom: '8%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['3月', '4月', '5月', '6月', '7月', '8月'],
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: true,
|
|
|
+ length: 4,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(199,211,229,0.5)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(199,211,229,0.5)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#c7d3e5'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ name:'（单位）',
|
|
|
+ type: 'value',
|
|
|
+ nameTextStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#C6D7F1',
|
|
|
+ fontWeight: 400,
|
|
|
+ },
|
|
|
+ nameGap: 25,
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ color: '#545454'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(199,211,229,0.3)',
|
|
|
+ width: 1,
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#c7d3e5'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "国内",
|
|
|
+ type: "custom",
|
|
|
+ renderItem: (params, api) => {
|
|
|
+ const location = api.coord([api.value(0), api.value(1)]);
|
|
|
+ const xAxisPoint = api.coord([api.value(0), 0]);
|
|
|
+ const distance = 7;
|
|
|
+ return {
|
|
|
+ type: "group",
|
|
|
+ children: [{
|
|
|
+ type: "CubeLeft",
|
|
|
+ shape: {
|
|
|
+ api,
|
|
|
+ xValue: api.value(0),
|
|
|
+ yValue: api.value(1),
|
|
|
+ x: location[0] + distance,
|
|
|
+ y: location[1],
|
|
|
+ xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#0B5FA9',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(11,95,169,0)'
|
|
|
+ }
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "CubeRight",
|
|
|
+ shape: {
|
|
|
+ api,
|
|
|
+ xValue: api.value(0),
|
|
|
+ yValue: api.value(1),
|
|
|
+ x: location[0] + distance,
|
|
|
+ y: location[1],
|
|
|
+ xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#088BFF',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(8,139,255,0)'
|
|
|
+ }
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "CubeTop",
|
|
|
+ shape: {
|
|
|
+ api,
|
|
|
+ xValue: api.value(0),
|
|
|
+ yValue: api.value(1),
|
|
|
+ x: location[0] + distance,
|
|
|
+ y: location[1],
|
|
|
+ xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#61B5FF',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#61B5FF'
|
|
|
+ }
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "#00BFF4",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#A5E2FF",
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ data: [410,330,210,210,480,190],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "出口",
|
|
|
+ type: "custom",
|
|
|
+ renderItem: (params, api) => {
|
|
|
+ const location = api.coord([api.value(0), api.value(1)]);
|
|
|
+ const xAxisPoint = api.coord([api.value(0), 0]);
|
|
|
+ const distance = 7;
|
|
|
+ return {
|
|
|
+ type: "group",
|
|
|
+ children: [{
|
|
|
+ type: "CubeLeft",
|
|
|
+ shape: {
|
|
|
+ api,
|
|
|
+ xValue: api.value(0),
|
|
|
+ yValue: api.value(1),
|
|
|
+ x: location[0] - distance,
|
|
|
+ y: location[1],
|
|
|
+ xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#28A9A2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(40,169,162,0)'
|
|
|
+ }
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "CubeRight",
|
|
|
+ shape: {
|
|
|
+ api,
|
|
|
+ xValue: api.value(0),
|
|
|
+ yValue: api.value(1),
|
|
|
+ x: location[0] - distance,
|
|
|
+ y: location[1],
|
|
|
+ xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#35FFF4',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(53,255,244,0)'
|
|
|
+ }
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "CubeTop",
|
|
|
+ shape: {
|
|
|
+ api,
|
|
|
+ xValue: api.value(0),
|
|
|
+ yValue: api.value(1),
|
|
|
+ x: location[0] - distance,
|
|
|
+ y: location[1],
|
|
|
+ xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#7EFFF8',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#7EFFF8'
|
|
|
+ }
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "#6AAAFF",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#046EFE",
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ data: this.kxData,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ initKxChart2(){
|
|
|
+ this.kxData2 = [0];
|
|
|
+ let data = aqiData;
|
|
|
+ this.kxOption2 = {
|
|
|
+ title: {
|
|
|
+ text: 'Beijing AQI',
|
|
|
+ left: '1%'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '10%',
|
|
|
+ right: '150px',
|
|
|
+ bottom: '20%'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: data.map(function (item) {
|
|
|
+ return item[0];
|
|
|
+ })
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ startValue: '2014-06-01'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'inside'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ visualMap: {
|
|
|
+ top: 50,
|
|
|
+ right: 10,
|
|
|
+ pieces: [
|
|
|
+ {
|
|
|
+ gt: 0,
|
|
|
+ lte: 50,
|
|
|
+ color: '#93CE07'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ gt: 50,
|
|
|
+ lte: 100,
|
|
|
+ color: '#FBDB0F'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ gt: 100,
|
|
|
+ lte: 150,
|
|
|
+ color: '#FC7D02'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ gt: 150,
|
|
|
+ lte: 200,
|
|
|
+ color: '#FD0100'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ gt: 200,
|
|
|
+ lte: 300,
|
|
|
+ color: '#AA069F'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ gt: 300,
|
|
|
+ color: '#AC3B2A'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ outOfRange: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: {
|
|
|
+ name: 'Beijing AQI',
|
|
|
+ type: 'line',
|
|
|
+ data: data.map(function (item) {
|
|
|
+ return item[1];
|
|
|
+ }),
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#333'
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ yAxis: 50
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: 300
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+ .chart{
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+ margin-top: 50px;
|
|
|
+ &:first-child{
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
