vue 使用echarts

---

---

需要echarts 相关插件 ：<script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

html相关代码：

<!--仪表板展示-->

<section class="col-md-12" style="margin-top: 60px;">

<el-col :span="18">

<section class="col-md-6" style="padding:0 5px;">

<el-col :span="24" style="border:1px solid #eee;">

<el-col :span="24" class="fxtital">

<span>本年目标客户数 - 分销一组</span>

</el-col>

<el-col :span="24" style="padding-left:20px;">

<el-col :span="10" style="margin-top: 30px;">

<el-col :span="24">

<el-col :span="24">目标值</el-col>

<el-col :span="24" class="fxinfo">{
  {dashboardStatis.dashboard1.target}}</el-col>

</el-col>

<el-col :span="24">

<el-col :span="24">已完成</el-col>

<el-col :span="24" class="fxinfo" style="color: #8e74f1;">{
  {dashboardStatis.dashboard1.accomplish}}</el-col>

</el-col>

</el-col>

<el-col :span="14">

<div id="mychart1" class="echare1" style="border:none;height:333px;"></div>

</el-col>

</el-col>

</el-col>

</section>

<section class="col-md-6" style="padding:0 5px;">

<el-col :span="24" style="border:1px solid #eee;">

<el-col :span="24" class="fxtital">

<span>本年目标销售额 - 分销一组</span>

</el-col>

<el-col :span="24" style="padding-left:20px;">

<el-col :span="10" style="margin-top: 30px;">

<el-col :span="24">

<el-col :span="24">目标值</el-col>

<el-col :span="24" class="fxinfo">{
  {dashboardStatis.dashboard2.target}}</el-col>

</el-col>

<el-col :span="24">

<el-col :span="24">已完成</el-col>

<el-col :span="24" class="fxinfo" style="color: #8e74f1;">{
  {dashboardStatis.dashboard2.accomplish}}</el-col>

</el-col>

</el-col>

<el-col :span="14">

<div id="fxdashboard2" class="echare1" style="border:none;height:333px;"></div>

</el-col>

</el-col>

</el-col>

</section>

</el-col>

<el-col :span="6">

<section class="col-md-12" style="padding:0 5px;">

<el-col class="echare1">

<el-col :span="24" class="fxtital" style="margin-bottom: 10px;">

<span>今日工作提醒</span>

</el-col>

<el-card class="box-card" style="background: #8e75f1;margin-top:10px;">

<div class="text item" style="color:#fff;">

<el-col :span="24" class="cardtitle">你今日跟进记录</el-col>

<el-col :span="24" style="margin-bottom:20px;">

<el-col :span="16" class="cardlist">{
  {dashboardStatis.statistics.record?dashboardStatis.statistics.record:0}}条</el-col>

<el-col :span="8" style="margin-top: 9px;">

<a v-bind:href="[followurl]" class="carda">查看详情</a>

</el-col>

</el-col>

</div>

</el-card>

<el-card class="box-card" style="background: #67c23a;">

<div class="text item" style="color:#fff;">

<el-col :span="24" class="cardtitle">你今日新增客户</el-col>

<el-col :span="24" style="margin-bottom:20px;">

<el-col :span="16" class="cardlist">{
  {dashboardStatis.statistics.client?dashboardStatis.statistics.client:0}}个</el-col>

<el-col :span="8" style="margin-top: 9px;">

<a v-bind:href="[enterpriseurl]" class="carda">查看详情</a>

</el-col>

</el-col>

</div>

</el-card>

<el-card class="box-card" style="background: #f17575;">

<div class="text item" style="color:#fff;">

<el-col :span="24" class="cardtitle">你今日回访计划</el-col>

<el-col :span="24" style="margin-bottom:20px;">

<el-col :span="16" class="cardlist">{
  {dashboardStatis.statistics.visit?dashboardStatis.statistics.visit:0}}个</el-col>

<el-col :span="8" style="margin-top: 9px;">

<a v-bind:href="[returnVisit]" class="carda">查看详情</a>

</el-col>

</el-col>

</div>

</el-card>

</el-col>

</section>

</el-col>

</section>

<!--销售数据分析-->

<section class="col-md-12" style="margin-top: 20px;">

<el-col :span="24" style="border:1px solid #eee;padding-bottom: 10px;">

<el-col :span="24" class="fxtital">

<span style="padding-left:30px;color:#fff;">销售数据分析</span>

<el-form :model="form" label-width="100px" class="demo-ruleForm" style="float:right;margin-right:40px;height: 35px;color:#fff;">

<el-form-item label="品牌：" prop="typeId">

<el-select v-model="select.brand" placeholder="请选择" clearable @change="changebrand">

<el-option v-for="item in crmbrand" :label="item.typename" :value="item.typename" style="width:120px;"></el-option>

</el-select>

</el-form-item>

</el-form>

</el-col>

<el-col :span="12">

<el-col :span="24" class="shape">我的月销售额{
  {select.fxmonth}}月</el-col>

<el-col :span="24" style="margin-top:15px;">

<el-col :span="8">

<el-card class="box-card cardmonth">

<div class="text item">

<el-col :span="24" class="cardlist" style="color: #409eff;">{
  {section.month.target?section.month.target:'0'}}万</el-col>

<el-col :span="24" class="carddetail">月目标销售额</el-col>

</div>

</el-card>

</el-col>

<el-col :span="8">

<el-card class="box-card cardmonth">

<div class="text item">

<el-col :span="24" class="cardlist" style="color: #d48164;">{
  {section.month.accomplish?section.month.accomplish:'0'}}万</el-col>

<el-col :span="24" class="carddetail">月完成销售额</el-col>

</div>

</el-card>

</el-col>

<el-col :span="8">

<el-card class="box-card cardmonth">

<div class="text item">

<el-col :span="24" class="cardlist" style="color: #8e74f1;">{
  {section.month.finishingRate?section