init

src/components/Charts/barPercent.vue

@@ -0,0 +1,103 @@
+<template>
+    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+</template>
+<script>
+    // 引入 ECharts 主模块
+    const echarts = require('echarts/lib/echarts');
+    // 引入柱状图
+    require('echarts/lib/chart/bar');
+    // 引入提示框和标题组件
+    require('echarts/lib/component/tooltip');
+    export default {
+      name: 'barPercent',
+      props: {
+        className: {
+          type: String,
+          default: 'bar-percent-chart'
+        },
+        id: {
+          type: String,
+          default: 'bar-percent-chart'
+        },
+        width: {
+          type: String,
+          default: '100px'
+        },
+        height: {
+          type: String,
+          default: '80px'
+        },
+        dataNum: {
+          type: Number,
+          default: 0
+        }
+      },
+      data() {
+        return {
+          chart: null
+        };
+      },
+      watch: {
+        dataNum() {
+          this.setOptions()
+        }
+      },
+      mounted() {
+        this.initBar();
+      },
+      methods: {
+        initBar() {
+          this.chart = echarts.init(document.getElementById(this.id));
+        },
+        setOptions() {
+          this.chart.setOption({
+            tooltip: {
+              show: true,
+              formatter(params) {
+                return '已完成' + params.value + '篇<br/>目标90篇<br/>完成进度' + Math.round((params.value / 90) * 100) + '%'
+              }
+            },
+            grid: {
+              left: 0,
+              right: 0,
+              bottom: 0,
+              top: 0,
+              containLabel: false
+            },
+            xAxis: [{
+              type: 'category',
+              data: ['文章完成比例']
+            }],
+            yAxis: [{
+              type: 'value',
+              data: [],
+              show: false
+            }],
+            animationDelay: 1000,
+            series: [{
+              type: 'bar',
+              name: '初诊',
+              itemStyle: {
+                normal: {
+                  color: '#e5e5e5'
+                }
+              },
+              silent: true,
+              barGap: '-100%', // Make series be overlap
+              data: [150]
+            }, {
+              type: 'bar',
+              name: 'app',
+              itemStyle: {
+                normal: {
+                  color: '#30b08f'
+                }
+              },
+              z: 10,
+              data: [this.dataNum]
+            }]
+          })
+        }
+      }
+    }
+</script>

src/components/Charts/keyboard.vue

@@ -0,0 +1,113 @@
+<template>
+    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+</template>
+<script>
+    // 引入 ECharts 主模块
+    const echarts = require('echarts/lib/echarts');
+    // 引入柱状图
+    require('echarts/lib/chart/bar');
+    require('echarts/lib/chart/line');
+    // 引入提示框和标题组件
+    require('echarts/lib/component/tooltip');
+    require('echarts/lib/component/title');
+
+    require('echarts/lib/component/visualMap');
+    export default {
+      name: 'barPercent',
+      props: {
+        className: {
+          type: String,
+          default: 'bar-percent-chart'
+        },
+        id: {
+          type: String,
+          default: 'bar-percent-chart'
+        },
+        width: {
+          type: String,
+          default: '200px'
+        },
+        height: {
+          type: String,
+          default: '200px'
+        }
+      },
+      data() {
+        return {};
+      },
+      mounted() {
+        this.initBar();
+      },
+      methods: {
+        initBar() {
+          this.chart = echarts.init(document.getElementById(this.id));
+
+          const xAxisData = [];
+          const data = [];
+          for (let i = 0; i < 30; i++) {
+            xAxisData.push(i + '号');
+            data.push(Math.round(Math.random() * 2 + 3))
+          }
+
+          this.chart.setOption(
+            {
+              backgroundColor: '#08263a',
+              tooltip: {
+                trigger: 'axis'
+              },
+              xAxis: {
+                show: false,
+                data: xAxisData
+              },
+              visualMap: {
+                show: false,
+                min: 0,
+                max: 50,
+                dimension: 0,
+                inRange: {
+                  color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+                }
+              },
+              yAxis: {
+                axisLine: {
+                  show: false
+                },
+                axisLabel: {
+                  textStyle: {
+                    color: '#4a657a'
+                  }
+                },
+                splitLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#08263f'
+                  }
+                },
+                axisTick: {}
+              },
+              series: [{
+                type: 'bar',
+                data,
+                name: '撸文数',
+                itemStyle: {
+                  normal: {
+                    barBorderRadius: 5,
+                    shadowBlur: 10,
+                    shadowColor: '#111'
+                  }
+                },
+                animationEasing: 'elasticOut',
+                animationEasingUpdate: 'elasticOut',
+                animationDelay(idx) {
+                  return idx * 20;
+                },
+                animationDelayUpdate(idx) {
+                  return idx * 20;
+                }
+              }]
+            }
+                )
+        }
+      }
+    }
+</script>

src/components/Charts/line.vue

@@ -0,0 +1,145 @@
+<template>
+    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+</template>
+<script>
+    // 引入 ECharts 主模块
+    const echarts = require('echarts/lib/echarts');
+    // 引入图
+    require('echarts/lib/chart/line');
+    // 引入提示框和标题组件
+    require('echarts/lib/component/markLine');
+    require('echarts/lib/component/markPoint');
+    require('echarts/lib/component/tooltip');
+    export default {
+      name: 'lineChart',
+      props: {
+        className: {
+          type: String,
+          default: 'line-chart'
+        },
+        id: {
+          type: String,
+          default: 'line-chart'
+        },
+        width: {
+          type: String,
+          default: '100%'
+        },
+        height: {
+          type: String,
+          default: '280px'
+        },
+        listData: {
+          type: Array,
+          require: true
+        }
+      },
+      data() {
+        return {
+          chart: null
+        };
+      },
+      watch: {
+        listData(dataList) {
+          this.setLine(dataList)
+        }
+      },
+      mounted() {
+        this.chart = echarts.init(document.getElementById(this.id));
+      },
+      methods: {
+        setLine(dataList) {
+          const xAxisData = [];
+          const data = [];
+          for (let i = 0; i < dataList.length; i++) {
+            const item = dataList[i]
+            xAxisData.push(item.week.substring(item.week.length - 2) + '周');
+            data.push(item.count)
+          }
+          const markLineData = [];
+          for (let i = 1; i < data.length; i++) {
+            markLineData.push([{
+              xAxis: i - 1,
+              yAxis: data[i - 1],
+              value: data[i] - data[i - 1]
+            }, {
+              xAxis: i,
+              yAxis: data[i]
+            }]);
+          }
+          this.chart.setOption({
+            title: {
+              text: 'Awesome Chart'
+            },
+            grid: {
+              left: 0,
+              right: 0,
+              bottom: 20,
+
+              containLabel: true
+            },
+            tooltip: {
+              trigger: 'axis'
+            },
+            animationDelay: 1000,
+            xAxis: {
+              data: xAxisData,
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              }
+//                        axisLabel:{
+//                            show:false
+//                        },
+            },
+
+            yAxis: {
+              splitLine: {
+                show: false
+              },
+              show: false
+              // min: 90
+            },
+            series: [{
+              name: '撸文数',
+              type: 'line',
+              data,
+              markPoint: {
+                data: [
+                    { type: 'max', name: '最大值' },
+                    { type: 'min', name: '最小值' }
+                ]
+              },
+              itemStyle: {
+                normal: {
+                  color: '#30b08f'
+                }
+              },
+              markLine: {
+                silent: true,
+                smooth: true,
+                effect: {
+                  show: true
+                },
+                animationDuration(idx) {
+                  return idx * 100;
+                },
+                animationDelay: 1000,
+                animationEasing: 'quadraticInOut',
+                distance: 1,
+                label: {
+                  normal: {
+                    position: 'middle'
+                  }
+                },
+                symbol: ['none', 'none'],
+                data: markLineData
+              }
+            }]
+          })
+        }
+      }
+    }
+</script>