vue-quasar引入echarts

1.通过 npm 获取 echarts，npm install echarts --save

2.引入Echarts

(1).在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<template>
    <div id="main">        
 //定义echarts图标的宽和高
</template>

(2).然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的echarts图表

<template>
    <div id="main">        
 //定义echarts图标的宽和高
</template>
<script>
  export default {
    mounted () {
      var echarts = require('echarts')
      var myChart = echarts.init(document.getElementById('main'))
    // 指定图表的配置项和数据
      var option = {
  // color: ['#0077FF'],
        title: {
          text: '库存分布'
        },
        tooltip: {
          trigger: 'item',
            // trigger: 'axis',
          axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'
        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
       },
        // legend: {
        //   data: ['2011年', '2012年']
        // },
      xAxis: [
        {
          // type: 'value',
          // type: 'category',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#2C2C2C',
              fontSize: 11
            }
          },
          data: ['市中区', '薛城区', '峄城区', '台儿庄区', '山亭区'],
          splitLine: {
            show: true
          }
          // 坐标轴在 grid 区域中的分隔线:是否显示分隔线
          // axisTick: {
          //   alignWithLabel: true
          // },
          // silent: false
          // 坐标轴是否是静态无法交互
        }
      ],
      yAxis: [
        {
          type: 'value',
          // type: 'category',
          max: 6000,
          min: 0,
          splitNumber: 3
        }
      ],
      series: [{
        type: 'bar',
        barWidth: '30%',
        data: [1800, 3200, 3890, 1000, 2300],
        label: {
          show: true,
          position: 'top',
          color: '#2c2c2c'
        },
        // 柱体顶部显示数值
        itemStyle: {
          color: function (params) {
            var colorList = [
              '#4a9eff', '#4a9eff', '#0077FF', '#cf0000', '#4a9eff'
            ]
            return colorList[params.dataIndex]
          }
        },
        markLine: {
          symbol: ['none', 'none'],
          label: {
            show: true,
            position: 'start'
          },
          lineStyle: {
            color: '#CF0000',
            width: 1
          },
          data: [{
            yAxis: 1000
            // 固定值1000
            // type: 'min',
            // name: '最小值'
            // 取最小值为标线
          }]
        }
        // 库存不足红色标线
      }]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
   }
</script>

3.如果引入多个echarts图表,那就多定义几个div和option就好

  <template>
    <div id="main">        
     //定义echarts图标的宽和高
    <div id="main1">
    <div id="main2">
</template>
<script>
  export default {
    mounted () {
      var echarts = require('echarts')
      var myChart = echarts.init(document.getElementById('main'))
    // 指定图表的配置项和数据
      var option = {...}
    myChart.setOption(option)
    var myChart1 = echarts.init(document.getElementById('main1'))
            // 指定图表的配置项和数据
      var option1 = {...}
    myChart1.setOption(option1)
    var myChart2 = echarts.init(document.getElementById('main2'))
    // 指定图表的配置项和数据
      var option2 = {...}
    myChart.setOption(option2)
   }
</script>