1.安装echart

 npm install vue-echart

2.man.js中导入echart

import Vue from 'vue'
import App from './App'
import router from '../src/router/router'
// 导入vue-echarts插件
import ECharts from 'vue-echarts/components/ECharts'
// 按需导入echarts的图形类型
import 'echarts/lib/chart/radar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
// 导入工具部分
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title';
// register component to use
import 'echarts/lib/component/legendScroll';
// register component to use
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';
import 'echarts/lib/component/markArea';
import 'echarts/lib/component/dataZoom';
// 全局注册chart组件
Vue.component('chart', ECharts)

3.使用

<style>
  @import "../../css/style.css";
</style>
<style scoped>
  @import "../../css/vue_echart.css";
</style>
<template>
    <div class="echart">
      <img class="loading" src="../../assets/loading.gif"  v-if="hidden">
      <div class="title">
        <div class="choose">
          <div class="pie" @click="chartPie">圆环图</div>
          <div class="line" @click="chartLine">折线图</div>
        </div>
        <div class="name">房产价格分析图</div>
      </div>
      <div v-if="show">
        <chart  class="vueTop" :options="ying" ref="echarts1" ></chart>
      </div>
      <div v-if="showLine">
        <chart  class="vueTop" :options="lineChart" ref="echarts" ></chart>
      </div>
      <div class="vueBtm">
        <button @click="toPersonal">单个房屋价格</button>
        <button @click="toMap">房屋地址</button>
      </div>
    </div>
</template>


<script>

    export default {
      data() {
        return {
          show: true,
          showLine: false
                }
      },
      created(){ },
      methods:{
        toPersonal(){
          this.$router.push({path:'/PersonalHouse'})
        },
        toMap(){
          this.$router.push({path:'/map_marker'})
        },
        chartPie(){
          this.show = true;
          this.showLine = false;
        },
        chartLine(){
          this.show = false;
          this.showLine = true;

        },
      },
      computed: {
      //折线图
        lineChart(){
          return{
            tooltip : {
              trigger: 'axis'
            },

            calculable : true,
            xAxis : [
              {
                type : 'category',
                boundaryGap : false,
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    width: 0,
                    type: 'solid',
                  }
                },
                splitLine: {
                  show: false,
                },
                axisLabel: {
                  textStyle: {
                    color: '#FFF',
                    fontSize: 15,
                  }
                },
                nameLocation:'end',
                axisLabel : {
                  interval:0,
                  rotate:"45",
                  textStyle:{
                    color: '#FFF',
                    fontSize: 10,
                  }
                },
                data : ["红色","蓝色","紫色","绿色", "粉色"]
              }
            ],
            yAxis : [
              {
                type: 'value',
                show: false,
              }
            ],
            series : [
              {
                type: 'line',
                stack: 'line',
                symbol: 'circle',
                symbolSize: 12,
                selectedMode: 'single',
                itemStyle: {
                  normal: {
                    color: '#FCDB93',
                    borderColor: '#FFF',
                    borderWidth: 2,
                    lineStyle: {
                      width: 4,
                      color: '#FFF'
                    }
                  }
                },
                data: this.series,
                markPoint : {
                  data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                  ]
                },
                markLine : {
                  data : [
                    {type : 'average', name: '平均值'}
                  ]
                }
              }
            ]
          }
        },
        //
        ying() {
          return {
            animation: false,
            color:['#8E665E', '#4A2C2C', '#A29F9F ', '#600F0F', '#6D6060'],
            graphic: {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: '合计：213213',
                textAlign: 'center',
                fill: '#FFF',
                width: 'auto',
                height: 'auto',
                fontSize: 13,
                fontWeight: 'bold',
              }
            },
            grid: {
              left: '-15%',
              right: '0%',
              top: '0%',
              containLabel: false
            },
            calculable : true,
            labelLine: {
              normal: {
                show: false,
              }
            },
            series : [
              {
                type: 'pie',
                radius: ['40%', '95%'],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    textStyle: {
                      fontSize: 13,
                      align: 'right',
                    },
                    show: true,
                    position: 'inner',
                    formatter: '{b} {d}%',
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: '13',
                      fontWeight: 'bold',
                    }
                  },
                },
                data:
                  [
                    {value: 12323], name: "红色"},
                    {value:  34344, name: "蓝色"},
                    {value: 43535, name: "紫色"},
                    {value:  53454, name: "粉色"},
                    {value:  67677, name: "黄色"}
                  ]

              }
            ]
          }
        },

      }
    }
</script>

vue-echart样式可以按照echart官网样式表修改
图形显示：