Vue 分别引入Highcharts和ECharts图表

一、Highcharts

安装

npm install highcharts --save 

如果cnpm装不上，采用cnpm
本码农用npm就是装不上，可能是网络原因，最后才用的cnpm安装成功的

cnpm install highcharts --save 

页面

<template>
  <div>
    <div id="highcharts" />
  </div>
</template>
 
<script>
import HighCharts from 'highcharts'
export default {
  data() {
    return {}
  },
  mounted() {
    let option = {
      title: {
        text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
      },
      subtitle: {
        text: '数据来源：thesolarfoundation.com'
      },
      yAxis: {
        title: {
          text: '就业人数'
        }
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
      },
      plotOptions: {
        series: {
          label: {
            connectorAllowed: false
          },
          pointStart: 2010
        }
      },
      series: [
        {
          name: '安装，实施人员',
          data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
        },
        {
          name: '工人',
          data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
        },
        {
          name: '销售',
          data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
        },
        {
          name: '项目开发',
          data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
        },
        {
          name: '其他',
          data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
        }
      ],
      responsive: {
        rules: [
          {
            condition: {
              maxWidth: 500
            },
            chartOptions: {
              legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
              }
            }
          }
        ]
      }
    }
    if (option && typeof option === 'object') {
      HighCharts.chart('highcharts', option)
    }
  }
}
</script>
<style scoped>
</style>

启动项目后，会发现报错

其实我们还需要引入一个venn.js

import venn from 'highcharts/modules/venn'
venn(HighCharts)

在运行看见下图即可

二、ECharts

安装

npm install echarts --save

全局引入main.js

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

单页面引入

import echarts from 'echarts'

页面

<template>
  <div>
    <div id="echarts"></div>
  </div>
</template>

<script>
// 单页面引用
import echarts from 'echarts'
export default {
  data() {
    return {}
  },
  mounted() {
    let dom = document.getElementById('echarts')
    // 全局引用
    let myChart = this.$echarts.init(dom)
    // 单页引用
    // let myChart = echarts.init(dom)
    let option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    }
    if (option && typeof option === 'object') {
      myChart.setOption(option, true)
    }
  }
}
</script>

<style scoped lang="scss">
// 必须设置echarts的宽跟高，不然不显示
#echarts {
  width: 600px;
  height: 300px;
}
</style>

在运行看见下图即可