vue+highcharts图表封装【曲线图+柱形图+（曲线柱图）+饼图+面积图】

最近做一个后台系统，后台系统其实是有很多图表。但因为运营大佬想让图表可以实现导出成excel等格式。但后端不太愿意配合，发现原来highcharts可以来导出。就用highcharts。但源生的比较复杂。图表的比较多。所以丸子就把一些常用的图表封装了
封装的代码

<template>
  <div class="highcharts-container" style="height:400px"></div>
</template>
<script>
import Highcharts from 'highcharts/highstock'
export default {
  props: ['options', 'styles'],
  name: 'highcharts',
  data() {
    return {
      chart: null
    }
  },
  watch: {
    options(newValue, oldValue) {
      this.options = newValue
      this.initChart()
    },
    deep: true

  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      //  console.log(this.$el)
      this.$nextTick(
        () =>
          (this.chart = new Highcharts.Chart(this.$el, {
            title: {
              text:
              this.options.title || ''
            },
            subtitle: {
              text: this.options.subtitle || ''
            },
            colors: this.options.clolor || [
              '#058DC7',
              '#50B432',
              '#ED561B',
              '#DDDF00',
              '#24CBE5',
              '#64E572',
              '#FF9655',
              '#FFF263',
              '#6AF9C4'
            ],
            xAxis: {
              title: {
                text: this.options.xtitle || ''
              },
              categories: this.options.categories
            },
            yAxis: {
              title: {
                text: this.options.ytitle || ''
              }
            },
            plotOptions: {
              series: {
                label: {
                  connectorAllowed: false
                }
              }
            },
            series: this.options.series, // 数据
            tooltip: {
              headerFormat:
                '<span style="font-size:10px">{point.key}</span><table>',
              pointFormat:
                '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f}' +
                (this.options.yCompany || '') +
                '</b></td></tr>',
              footerFormat: '</table>',
              shared: true,
              useHTML: true
            }
          }))
      )
    }
  }
}
</script>

自己调用的数据结构

曲线图
export const basicData = {
  title: '333333', // 标题  没有则可去掉
  subtitle: '副标题', // 副标题  没有则可去掉
  ytitle: '温度', // y轴标题  没有则可以整行去掉
  xtitle: 'x轴', // x轴标题  没有则可以整行去掉
  // yCompany: 'mm', // y轴单位没有则去掉
  clolor: ['red', 'yellow', 'blue'], // 颜色 ，没有整行去掉，默认['#058DC7', '#50B432', '#ED561B', '#DDDF00','#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
  categories: ['一月', '二月', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // x轴数据
  series: [{ name: '丸子1', data: [7, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] },
    { name: '丸子2', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17, 16.6, 14.2, 10.3, 6.6, 4.8] },
    { name: '丸子3', data: [5, 6, 8.5, 17.5, 15.2, 2.5, 21.2, 22.5, 15.3, 14.3, 18.9, 2.6] }] // y轴数据  这个是3条线，所以我传3个，1个则可以传一下
}

柱图

柱图
<template>
  <div class="highcharts-container" style="height:400px"></div>
</template>
<script>
import Highcharts from 'highcharts/highstock'
export default {
  props: ['options', 'styles'],
  name: 'highcharts',
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    console.log(Highcharts)
    this.initChart()
  },
  methods: {
    initChart() {
      if (this.styles) {
        this.$el.style.width = (this.styles.width || '') + 'px'
        this.$el.style.height = (this.styles.height || '') + 'px'
      }
      //  console.log(this.$el)
      this.$nextTick(
        () =>
          (this.chart = new Highcharts.Chart(this.$el, {
            chart: {
              type: 'column'
            },
            colors: this.options.clolor || (['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']),
            title: {
              text: this.options.title || ''
            },
            subtitle: {
              text: this.options.subtitle || ''
            },
            xAxis: {
              categories: this.options.categories,
              title: {
                text: this.options.xtitle || ''
              },
              crosshair: true
            },
            yAxis: {
              min: 0,
              title: {
                text: this.options.ytitle || ''
              }
            },
            tooltip: {
              // head + 每个 point + footer 拼接成完整的 table
              headerFormat:
            '<span style="font-size:10px">{point.key}</span><table>',
              pointFormat:
            '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f}' + (this.options.yCompany || '') + '</b></td></tr>',
              footerFormat: '</table>',
              shared: true,
              useHTML: true
            },
            plotOptions: {
              column: {
                borderWidth: 0
              }
            },
            series: this.options.series
          })
          ))
      //  this.$el.style.width = (this.styles.width || 800) + 'px'
      //  this.$el.style.height = (this.styles.height || 400) + 'px'
      //  this.chart = new Highcharts.Chart(this.$el, this.options);
    }
  }
}
</script>

调用
export const barData = {
//  title: '333333', // 标题  没有则可去掉
//  subtitle: '副标题', // 副标题  没有则可去掉
//  ytitle: '温度', // y轴标题  没有则可以整行去掉
//  xtitle: 'x轴', // x轴标题  没有则可以整行去掉
  categories: [
    '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
  ], // x轴数据
  yCompany: 'mm', // y轴单位没有则去掉
  series: [{
    name: '东京',
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }, {
    name: '纽约',
    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
  }, {
    name: '伦敦',
    data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
  }, {
    name: '柏林',
    data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
  }]// y轴数据  这个是4条，所以我传4个，1个则可以传一下
}

柱形+曲线

<template>
  <div class="highcharts-container" style="height:400px"></div>
</template>
<script>
import Highcharts from 'highcharts/highstock'
export default {
  props: ['options', 'styles'],
  name: 'highcharts',
  data() {
    return {
      chart: null,
      series: []
    }
  },
  watch: {
    options(newValue, oldValue) {
      this.options = newValue
      // this.options.series.forEach(function(v, k) {

      // if (k < 1) {
      //   v.type = "column";
      // }
      //  })

      this.initChart()
    },
    deep: true
  },
  mounted() {
    console.log(Highcharts)
    this.initChart()
  },
  methods: {
    initChart() {
      if (this.styles) {
        this.$el.style.width = (this.styles.width || '') + 'px'
        this.$el.style.height = (this.styles.height || '') + 'px'
      }
      //  console.log(this.$el)
      this.$nextTick(
        () =>
          (this.chart = new Highcharts.Chart(this.$el, {
            chart: {
              zoomType: 'xy'
            },
            title: {
              text: this.options.title || '日期'
            },
            subtitle: {
              text: this.options.subtitle || ''
            },
            xAxis: {
              categories: this.options.categories,
              crosshair: true
            },
            colors: this.options.clolor || ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
            yAxis: [
              { // Primary yAxis
                labels: {
                  format: '',
                  style: {
                    color: Highcharts.getOptions().colors[1]
                  }
                },
                title: {
                  text: this.options.yAxis ? this.options.yAxis.text1 : '',
                  style: {
                    color: Highcharts.getOptions().colors[1]
                  }
                }
              }, { // Secondary yAxis
                title: {
                  text: this.options.yAxis ? this.options.yAxis.text2 : '',
                  style: {
                    color: Highcharts.getOptions().colors[0]
                  }
                },
                labels: {
                  format: '',
                  style: {
                    color: Highcharts.getOptions().colors[0]
                  }
                },
                opposite: true
              }
              // {
              //   // Primary yAxis
              //   labels: {
              //     format: "{value}",
              //     style: {
              //       color: Highcharts.getOptions().colors[1]
              //     }
              //   },
              //   title: {
              //     text: "",
              //     style: {
              //       color: Highcharts.getOptions().colors[1]
              //     }
              //   }
              // },
              // {
              //   // Secondary yAxis
              //   title: {
              //     text: "",
              //     style: {
              //       color: Highcharts.getOptions().colors[0]
              //     }
              //   },
              //   labels: {
              //     format: "{value}",
              //     style: {
              //       color: Highcharts.getOptions().colors[0]
              //     }
              //   },
              //   opposite: true
              // }
            ],
            tooltip: {
              shared: true
            },
            series: this.options.series
          }))
          //  this.$el.style.width = (this.styles.width || 800) + 'px'
      ) //  this.$el.style.height = (this.styles.height || 400) + 'px'
      //  this.chart = new Highcharts.Chart(this.$el, this.options);
    }
  }
}
</script>

// 柱形图+曲线图
export const barlineData = {
  title: '333333',
  //  subtitle: '副标题', // 副标题  没有则可去掉
  categories: [
    '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' // x轴数据
  ],
  yAxis: {
    text1: '温度',
    text2: '降雨量'
    // 因为这个y轴是有两个，所以我们传一个数组 text1是左边的，text2是右边
  },
  series: [{
    name: '温度',
    type: 'column',
    yAxis: 1,
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }, {
    name: '降雨量',
    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
  }, {
    name: '降雨',
    data: [81.6, 78.8, 98.5, 43.4, 106.0, 44.5, 105.0, 14.3, 91.2, 3.5, 106.6, 92.3]
  }, {
    name: '雨',
    data: [41.6, 78.8, 98.5, 43.4, 106.0, 44.5, 25.0, 14.3, 4.2, 3.5, 76.6, 82.3]
  }] // y轴数据
}

饼图

<template>
  <div class="highcharts-container" style="height:400px"></div>
</template>
<script>
import Highcharts from 'highcharts/highstock'
export default {
  props: ['options', 'styles'],
  name: 'highcharts',
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    console.log(Highcharts)
    this.initChart()
  },
  methods: {
    initChart() {
      if (this.styles) {
        this.$el.style.width = (this.styles.width || '') + 'px'
        this.$el.style.height = (this.styles.height || '') + 'px'
      }
      //  console.log(this.$el)
      this.chart = new Highcharts.Chart(this.$el, {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: 'pie'
        },
        title: {
          text: this.options.title || ''
        },
        subtitle: {
          text: this.options.subtitle || ''
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              format: '<b>{point.name}</b>: {point.percentage:.1f} %',
              style: {
                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
              }
            }
          }
        },
        series: [{
          name: 'Brands',
          colorByPoint: true,
          data: [{
            name: 'Chrome',
            y: 61.41,
            sliced: true,
            selected: true
          }, {
            name: 'Internet Explorer',
            y: 11.84
          }, {
            name: 'Firefox',
            y: 10.85
          }, {
            name: 'Edge',
            y: 4.67
          }, {
            name: 'Safari',
            y: 4.18
          }, {
            name: 'Sogou Explorer',
            y: 1.64
          }, {
            name: 'Opera',
            y: 1.6
          }, {
            name: 'QQ',
            y: 1.2
          }, {
            name: 'Other',
            y: 2.61
          }]
        }]

        // legend: {
        //   layout: "vertical",
        //   align: "right",
        //   verticalAlign: "middle"
        // },

      })
      //  this.$el.style.width = (this.styles.width || 800) + 'px'
      //  this.$el.style.height = (this.styles.height || 400) + 'px'
      //  this.chart = new Highcharts.Chart(this.$el, this.options);
    }
  }
}
</script>

// 饼图
// pie chart data
export const PieData = {
  title: 'Contents ivry',
  subtitle: '3D ',
  plotOptions: {
    pie: {
      innerSize: 100,
      depth: 45
    }
  },
  series: [{
    name: 'Delivered amount',
    data: [
      ['Bananas', 8],
      ['Kiwi', 3],
      ['Mixed nuts', 1],
      ['Oranges', 6],
      ['Apples', 8],
      ['Pears', 4],
      ['Clementines', 4],
      ['Reddish (bag)', 1],
      ['Grapes (bunch)', 1]
    ]
  }]
}

面积图

<template>
  <div class="highcharts-container" style="height:400px"></div>
</template>
<script>
import Highcharts from 'highcharts/highstock'
export default {
  props: ['options', 'styles'],
  name: 'highcharts',
  data() {
    return {
      chart: null
    }
  },
  watch: {
    options(newValue, oldValue) {
      this.options = newValue
      this.initChart()
    },
    deep: true

  },
  mounted() {
    console.log(Highcharts)
    this.initChart()
  },
  methods: {
    initChart() {
      console.log(this.options)
      this.$nextTick(
        () =>
          (this.chart = new Highcharts.Chart(this.$el, {
            chart: {
              type: 'area'
            },
            title: {
              text: this.options.title || ''
            },
            colors: this.options.clolor || [
              '#058DC7',
              '#50B432',
              '#ED561B',
              '#DDDF00',
              '#24CBE5',
              '#64E572',
              '#FF9655',
              '#FFF263',
              '#6AF9C4'
            ],
            subtitle: {},
            xAxis: {
              categories: this.options.categories,
              title: {
                text: this.options.xtitle || ''
              }
            },
            yAxis: {
              title: {
                text: this.options.ytitle || ''
              },
              labels: {
                // formatter: function() {
                //   return this.value / 1000 + 'k'
                // }
              }
            },
            tooltip: {
              // head + 每个 point + footer 拼接成完整的 table
              headerFormat:
            '<span style="font-size:10px">{point.key}</span><table>',
              pointFormat:
            '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f}' + (this.options.yCompany || '') + '</b></td></tr>',
              footerFormat: '</table>',
              shared: true,
              useHTML: true
            },
            plotOptions: {},
            series: this.options.series
          }))
      )
      //  this.$el.style.width = (this.styles.width || 800) + 'px'
      //  this.$el.style.height = (this.styles.height || 400) + 'px'
      //  this.chart = new Highcharts.Chart(this.$el, this.options);
    }
  }
}
</script>