vue element echart 之使用

 

最近在vue 中要加个表格统计的， 使用 了echart 

   说下环境，，vue2.x   webket cil3 建立的项目

   其他环境配置已全部到位

  安装：npm install echarts --save

  使用

在 要使用的组件中直接

<script>


  var echart = require('echarts')
  export default {
}

这样就成功引入了。。。 不用再main.js中添加其他配置

<template>

<div class="echcart" id="mannageChart"></div>

</template>

在mouted 中使用：
mounted() {
  var mychart = echart.init(document.getElementById('mannageChart'));
  mychart.setOption({
    title: {text: '该生产详细进度'},

    tooltip: {},
    xAxis: {
      data: ['yms', 'xiaohe', 'doang', 'yms', 'xiaohe'],
    },
    yAxis: {},
    series: [{
      name: 'xioal',
      type: 'bar',
      data: [5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6, 5, 89, 6,]
    }],
  })
}

 嗯嗯  这样就可以简单使用了~~ ，对大小要求的可以按需引入~

 后继会继续更新~

 

参考链接： 
https://www.echartsjs.com/zh/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts