vue-webpack 引入echarts 注意事项

0.执行教程 https://www.cnblogs.com/goloving/p/8654176.html
1.在index 中创建 div

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>app</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <div id="ecarts1" style="width:200px;height:200px" ></div>


  </body>
</html>

2.在组件中引入 echarts
　　

<template>

  <div>
    <HelloWorld></HelloWorld>
    <ButtonIvew></ButtonIvew>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";
import ButtonIvew from "./components/button";

export default {
  components: {
    HelloWorld,
    ButtonIvew
  },
  name: "App"
};


var echarts = require("echarts");
require('echarts/chart/line');
require('echarts/chart/bar');


var option = {
  tooltip: {
      trigger: 'axis'
  },
  legend: {
      data: ['蒸发量', '降水量']
  },
  toolbox: {
      show: true,
      feature: {
          mark: {
              show: true
          },
          dataView: {
              show: true,
              readOnly: false
          },
          magicType: {
              show: true,
              type: ['line', 'bar']
          },
          restore: {
              show: true
          },
          saveAsImage: {
              show: true
          }
      }
  },
  calculable: true,
  xAxis: [{
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  }],
  yAxis: [{
      type: 'value',
      splitArea: {
          show: true
      }
  }],
  series: [{
      name: '蒸发量',
      type: 'bar',
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
  }, {
      name: '降水量',
      type: 'bar',
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
  }]
};
var myChart = echarts.init(document.getElementById('ecarts1'));
myChart.setOption(option);

</script>

<style>
#app {
  text-align: center;
  margin: 60px;
}
</style>

　　
3.在组件构建完成挂载后执行生成echarts动作

vue-webpack 引入echarts 注意事项

猜你喜欢