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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/liujinyu/p/11291106.html