分享vue2的echarts基本封装，复制可直接使用

 

 图二 配置再最后 

//父组件

       <div style="width: 100%;height: 50%;padding-top: 4.5rem;">

          <LineEcharts

            :id="'2'" 

            :chart-data="humidity"

            :class-name="'湿度'"

          />

        </div>

<script>

export default {

  components: {

    LineEcharts

  },

     data （）{

return{

humidity: {

        xdata: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

        ydata: [82, 43, 90, 34, 90, 33, 32],

      },

}

}

</script>

//子组件 

<template>

  <div

    :id="id"

    :class="className"  //传的值可以来设置echarts的标题 单位等 看自己业务需求

    :style="{ height: height, width: width }"

  />

</template>

<script>

import echarts from 'echarts'

export default {

  props: {

    className: {

      type: String,

      default: 'chart'

    },

    id: {

      type: String,

      default: 'chart'

    },

    chartData: {

      type: Object,

      required: true

    },

    width: {

      type: String,

      default: '100%'

    },

    height: {

      type: String,

      default: '100%'

    }

  },

  methods: {

    initChart () {

      this.chart = echarts.init(document.getElementById(this.id))

      this.setOptions(this.chartData)

    },

   setOptions (chartData) {

      if (this.id === "1") {

        this.chart.setOption({

          xAxis: {

            type: 'category',

            data: chartData.xdata,

            axisTick: {

              show: false

            },

            axisLine: {

              show: true,

            },

            z: 10,

            axisLabel: { // 设置x轴的字

              show: true,

              interval: 0, // 使x轴横坐标全部显示

              textStyle: {// x轴字体样式

                margin: 15

              }

            },

          },

          // legend: {

          //   data: ['%'],

          //   left: 10,

          //   top: 10

          // },

          yAxis: {

            type: 'value',

            name: '',

            axisLine: {

              show: false

            },

            axisTick: {

              show: false

            },

            splitLine: { // 网格线

              lineStyle: {

                type: 'dotted' // 设置网格线类型 dotted：虚线 solid:实线

              },

              show: false // 隐藏或显示

            },

            axisLabel: {

              // formatter: '{value}级'

            }

          },

          title: {

            // title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置

            subtext: "单位（级）",

            left: 43, // 距离左边位置

            top: -12, // 距离上面位置

            subtextStyle: { // 设置二级标题的样式

              color: "#000"

            }

          },

          grid: {

            top: '7%',

            left: '%',

            right: '1%',

            bottom: '1%',

            // show: 'true',

            backgroundColor: '#9999',

            containLabel: true

          },

          dataZoom: [

            {

              type: 'inside',

            },

          ],

          series: [

            {

              type: 'line',

              data: chartData.ydata,

              smooth: true,

              symbol: "circle",

              symbolSize: 8,

              itemStyle: {

                normal: {

                  color: "#31AE4F",

                  borderColor: '#ffffff', // 拐点边框颜色

                  borderWidth: 2, // 拐点边框大小

                  label: {

                    show: true, // 在折线拐点上显示数据

                    position: 'bottom',

                    formatter: function (params) { // 再纵轴加上单位

                      // console.log("params echarts", params);

                      return params.value + "级"

                    }

                  },

                },

              },

              lineStyle: {

                color: "#2fc49a", // 折线的颜色

              }

            }

          ],

          backgroundColor: {

            type: 'linear',

            x: 0,

            y: 0,

            x2: 0,

            y2: 1,

            colorStops: [{

              offset: 0, color: '#E8F6EB' // 0% 处的颜色

            }, {

              offset: 1, color: '#F8FDFC' // 100% 处的颜色

            }],

            globalCoord: false // 缺省为 false

          }

        }, true)

      }

}

}

 图二配置 

 

else if (this.id === "5") {

        this.chart.setOption({

          // tooltip: {

          //   trigger: 'axis',

          // },

          grid: {

            top: '7%',

            left: '1%',

            right: '1%',

            bottom: '1%',

            // show: 'true',

            backgroundColor: '#9999',

            containLabel: true

          },

          tooltip: {

            trigger: "axis",

            formatter: '光照强度<br/> {c0}万lx'

          },

          title: {

            subtext: "单位（万lx）",

            left: 43, // 距离左边位置

            top: -12, // 距离上面位置

            subtextStyle: { // 设置二级标题的样式

              color: "#000"

            }

          },

          dataZoom: [

            {

              type: 'inside',

            },

          ],

          xAxis: {

            type: 'category',

            data: chartData.xdata,

            // triggerEvent: true,

            // axisTick: {

            //   show: false

            // },

            // axisLine: {

            //   show: false

            // },

            // z: 10

            axisTick: {

              alignWithLabel: true,

              show: false,

            },

            axisLine: {

              lineStyle: {

                // color: '#D3EBFF',

                type: 'solid'

              },

            },

            axisLabel: {

              show: true,

              interval: 0, // 使x轴横坐标全部显示

              textStyle: {// x轴字体样式

                margin: 15

              }

            }

          },

          yAxis: {

            type: 'value',

            name: '单位：lx',

            min: 0,

            interval: 100,

            nameTextStyle: {

              color: '#EC9A5C',

              fontSize: 12,

              nameLocation: 'start',

            },

            axisLine: {

              show: false

            },

            axisTick: {

              show: false

            },

            splitLine: {

              show: false,

              lineStyle: {

                type: 'dashed',

                // color: '#EABE5C'

              },

              // axisLabel: {

              //   // formatter: '{value}℃'

              // }

            },

            axisLabel: {

              textStyle: {

                // color: '#EC9A5C',

                // fontSize: '18'

              },

            }

          },

          series: [

            {

              emphasis: {

                itemStyle: {

                  opacity: 1

                }

              },

              data: chartData.ydata,

              type: 'pictorialBar', // 这是圆锥图

              barCategoryGap: '15', /* 多个并排柱子设置柱子之间的间距*/

              // symbol:

              //   'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',//这是很尖的圆锥

              symbol: 'triangle',

              itemStyle: {

                normal: {

                  color: {

                    type: 'linear',

                    x: 0,

                    y: 0,

                    x2: 0,

                    y2: 1,

                    colorStops: [{

                      offset: 0, color: '#FBEBBD' // 0% 处的颜色

                    },

                    {

                      offset: 0.5, color: '#F3D371' // 100% 处的颜色

                    },

                    {

                      offset: 1, color: '#E9BA23' // 100% 处的颜色

                    }],

                    global: false, // 缺省为 false

                  },

                  formatter: function (params) { // 再纵轴加上单位

                    // console.log("params echarts", params);

                    return params.value + "℃"

                  }

                },

              },

              z: 10,

              formatter: function (data) {

                // console.log("data00000", data);

                if (data.length > 1) {

                  return data[0].name + '<br/>' + data[0].value + '%<br />';

                }

              }

            }

          ]

        }, true)

      }