vue中引入echart并使用

1.安装echart

npm install echarts --save

2.项目全局引入echart（main.js目录下）

import * as echarts from 'echarts' //引入echart

Vue.prototype.$echarts=echarts; // echarts 需要挂在到VUE原型上

3.文件中使用 （xxx.vue）

<template>
  <div class='contain'>
     <div id="main" style="width:600px;height:400px;"></div>
  </div>
</template>
<script>
  export default{
    name:'xxx',
    mounted(){
      this.initCharts();  //初始化渲染echart图标
    },
    methods:{
     initCharts(){
      //  获取数据
       const option={
          title: {
            text: 'ECharts 入门示例'
          },
          series: [
            {
              type: 'pie',
              data: [
                {
                  value: 335,
                  name: '直接访问'
                },
                {
                  value: 234,
                  name: '联盟广告'
                },
                {
                  value: 1548,
                  name: '搜索引擎'
                }
              ],
              radius: '50%'
            }
          ]
       }
        var myChart = this.$echarts.init(document.getElementById('main'));//图标初始化
        myChart.setOption(option); // 渲染页面
        // 随着屏幕大小调节图标
        window.addEventListener('resize',()=>{
          myChart.receive();
        })
     }
    }
  }
</script>

4.效果图

 

二、2、项目按需引入（main.js）

 与element-ui按需引入方式一样，以柱状图为例

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';

import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';


// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

3.文件中使用（xxx.vue） 

<template>
  <div class='contain'>
     <div id="main" style="width:600px;height:400px;"></div>
  </div>
</template>
<script>
  export default{
    name:'xxx',
    mounted(){
      this.initCharts();  //初始化渲染echart图标
    },
    methods:{
     initCharts(){
      //  获取数据
       const option ={
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }
          ]
       }
        var myChart = this.echarts.init(document.getElementById('main'));//图标初始化
        myChart.setOption(option); // 渲染页面
        // 随着屏幕大小调节图标
        window.addEventListener('resize',()=>{
          myChart.receive();
        })
     }
    }
  }
</script>

4.效果图