Echarts的简单案例

1. 就简单说说柱状图

写的时候有两种方式：全局引入，按需引入。不过我建议用全局引入，引入之前，必须的下载echarts。

vue2.0   npm install echarts
vue3.0   npm add echarts

第一种： 全局引入，在main.js 里引入

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

第二种： 按需引入， let echarts2 = require('echarts/lib/echarts') // 引入折线图等组件 require('echarts/lib/chart/line') require('echarts/lib/chart/bar') require('echarts/lib/chart/radar')

// 引入提示框和title组件，图例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')

Vue.prototype.$echarts2 = echarts2

代码实现

<template>
<div>
 <div class="pie">
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div id="main1" style="float:left;width:400px;height: 300px"></div>
  <div id="main2" style="float:left;width:600px;height: 300px"></div>
 </div>
</div>
</template>
<script>
export default {
created() {},
 mounted() {
 this.initData();

},
methods: {
//初始化数据
  initData() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = this.$echarts.init(document.getElementById("main1")); // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: "item",
      
    },
    legend: {
      orient: "vertical",
      left: 10,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
    type: 'value'
},
series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar'
}]
  });
}
}
  </script>
<style lang="scss" scoped>

</style>

图片效果