zoukankan      html  css  js  c++  java
  • echars vue 封装全局组件 曲线 柱状图 同v-chars绿色系 配置样式

    Echars vue封装 ,曲线图

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>echars vue</title>
    </head>
    <body>
      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      <script src="https://echarts.baidu.com/examples/vendors/echarts/echarts.min.js"></script>
      <!-- aph echars-bar begin -->
      <template id="echars-bar">
        <div :id="domId" style="height: 100%;100%;overflow: hidden;"></div>
      </template>
      <script>
        const getBarOpation = (arrX = [], arrY = [], markLine = {}) => {
          var max;
          try {
            let targLineY = markLine.data[0].yAxis
            let arrYMax = Math.max.apply(null, arrY) || 0
            let tempMax = targLineY > arrYMax ? targLineY : arrYMax
            max = isNaN(tempMax) ? undefined : tempMax
          } catch (e) {}
          return {
            grid: {
              left: 47,
              top: 30,
              bottom: 20,
              right: 42
            },
            xAxis: {
              type: 'category',
              axisTick: { // 坐标轴 刻度线
                show: false,
              },
              axisLine: { // 坐标轴 主干线
                lineStyle: {
                  color: '#CCCECD'
                }
              },
              axisLabel: { // 坐标轴 文字
                color: "#1B2526",
                fontSize: 12
              },
              data: arrX,
            },
            yAxis: {
              splitNumber:4,
              type: 'value',
              max,
              axisTick: { // 坐标轴 刻度线
                show: false,
              },
              axisLine:{ // 坐标轴 主干线
                show:false
              },
              axisLabel: { // 坐标轴 文字
                color: "#1B2526",
                fontSize: 12
              },
              splitLine: { // 背景网格线
                show: true,
                lineStyle: {
                  color: '#F6F7F8',
                }
              },
            },
            tooltip: { // 鼠标hover 浮框
              trigger: 'axis',
              formatter: function (params) {
                param = params[0];
                return `${param.axisValue} ${param.value}`
              },
              axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                lineStyle:{
                  color: '#7FDFB5'
                },
                type: 'line'        // 默认为直线,可选为:'line' | 'shadow'
              }
            },
            series: [{// 数据内容主体
              data: arrY,
              type:'bar',
              markLine,
              itemStyle: {// 曲线上的拐点
                color: '#00BF6C',
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#ABEEDC'
                  }, {
                    offset: 1,
                    color: '#00BF6C'
                  }])
                }
              },
              barWidth: '24px' // 柱形 宽度
            }]
          }
        }
        Vue.component('echarsBar', {
          template: '#echars-bar',
          props: {
            x: {
              default: []
            },
            y: {
              default: []
            },
            markLine: {
              default() {
                return {}
              }
            }
          },
          watch: {
            y: function (newVal) {
              this.initDome()
            }
          },
          data() {
            return {
              domId: 'echars' + Math.random()
            }
          },
          created(){
            this.initDome()
          },
          methods: {
            initDome() {
              var time = setInterval(() => {
                let dom = document.getElementById(this.domId)
                if (dom) {
                  clearInterval(time)
                } else {
                  return
                }
                let myChart = echarts.init(dom);
                myChart.setOption(getBarOpation(this.x, this.y, this.markLine), true);
              }, 100);
            }
          }
        })
      </script>
      <!-- aph echars-bar end -->
      <!-- aph echars begin -->
      <template id="mc-echars">
        <div :id="domId" style="height: 100%;100%;overflow: hidden;">
        </div>
      </template>
      <script>
        const getOpation = (arrX = [], arrY = [], markLine = {}) => {
          var max;
          try{
            let targLineY = markLine.data[0].yAxis
            let arrYMax = Math.max.apply(null, arrY)||0
            let tempMax = targLineY > arrYMax ? targLineY: arrYMax
            max = isNaN(tempMax) ? undefined : tempMax
          }catch(e){}
          return {
            grid: {
              left: 47,
              top: 30,
              bottom: 20,
              right: 42
            },
            xAxis: {
              type: 'category',
              axisTick: { // 坐标轴 刻度线
                show: false,
              },
              axisLine: { // 坐标轴 主干线
                lineStyle: {
                  color: '#CCCECD'
                }
              },
              axisLabel: { // 坐标轴 文字
                color: "#1B2526",
                fontSize: 12
              },
              data: arrX,
            },
            yAxis: {
              type: 'value',
              max,
              splitNumber: 4,
              axisTick: { // 坐标轴 刻度线
                show: false,
              },
              axisLine: { // 坐标轴 主干线
                show: false
              },
              axisLabel: { // 坐标轴 文字
                color: "#1B2526",
                fontSize: 12
              },
              splitLine: { // 背景网格线
                show: true,
                lineStyle: {
                  color: '#F6F7F8',
                }
              },
            },
            tooltip: { // 鼠标hover 浮框
              trigger: 'axis',
              formatter: function (params) {
                param = params[0];
                return `${param.axisValue} ${param.value}`
              },
              axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                lineStyle: {
                  color: '#7FDFB5'
                },
                type: 'line'        // 默认为直线,可选为:'line' | 'shadow'
              }
            },
            series: [{// 数据内容主体
              data: arrY,
              type:'line',
              markLine,
              lineStyle: { // 曲线
                color: '#00BF6C'
              },
              itemStyle: {// 曲线上的拐点
                color: '#00BF6C'
              },
              areaStyle: {// 曲线下区域
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#00BF6C'
                  }, {
                    offset: 1,
                    color: '#effcf6'
                  }])
                }
              }
            }]
          }
        }
        Vue.component('mcEchars', {
          template: '#mc-echars',
          props: {
            x: {
              default: []
            },
            y: {
              default: []
            },
            markLine: {
              default() {
                return {}
              }
            }
          },
          watch: {
            y: function (newVal) {
              this.initDome()
            }
          },
          created(){
            this.initDome()
          },
          data() {
            return {
              domId: 'echars' + Math.random()
            }
          },
          methods: {
            initDome() {
              var time = setInterval(() => {
                let dom = document.getElementById(this.domId)
                if (dom) {
                  clearInterval(time)
                } else {
                  return
                }
                let myChart = echarts.init(dom);
                let opt = getOpation(this.x, this.y, this.markLine)
                myChart.setOption(opt, true);
              }, 100);
            }
          }
        })
      </script>
      <!-- aph echars end -->
      <!-- 主件部分 main 主体 -->
      <div id="app">
        <div style=" 800px;height:300px;overflow: hidden;">
          <mc-echars :x="arrX" :y="arrY" :mark-line="lastPriceMarkLine" />
        </div>
        <div style=" 800px;height:300px;overflow: hidden;">
          <echars-bar :x="arrX" :y="arrY" :mark-line="lastPriceMarkLine" />
        </div>
      </div>
      <script>
        var vm = new Vue({
          el:'#app',
          data () {
            return {
              lastPriceMarkLine:{
                data: [{
                  name: '11',
                  lineStyle: {
                    color: '#00BF6C'
                  },
                  yAxis: 33
                }]
              },
              arrX: this.initArr(),
              arrY: this.initArr()
            }
          },
          methods:{
            initArr(){
              return Array(10).fill().map(v => (Math.random() * 100).toFixed())
            }
          }
        })
      </script>
    </body>
    </html>
  • 相关阅读:
    解释机器学习模型的一些方法(一)——数据可视化
    机器学习模型解释工具-Lime
    Hive SQL 语法学习与实践
    LeetCode 198. 打家劫舍(House Robber)LeetCode 213. 打家劫舍 II(House Robber II)
    LeetCode 148. 排序链表(Sort List)
    LeetCode 18. 四数之和(4Sum)
    LeetCode 12. 整数转罗马数字(Integer to Roman)
    LeetCode 31. 下一个排列(Next Permutation)
    LeetCode 168. Excel表列名称(Excel Sheet Column Title)
    论FPGA建模,与面向对象编程的相似性
  • 原文地址:https://www.cnblogs.com/liujinyu/p/11291106.html
Copyright © 2011-2022 走看看