Home > Web Front-end > JS Tutorial > How to implement encapsulated components through VUE2.0+Element-UI+Echarts

How to implement encapsulated components through VUE2.0+Element-UI+Echarts

亚连
Release: 2018-06-02 09:46:51
Original
1888 people have browsed it

下面我就为大家分享一篇VUE2.0+Element-UI+Echarts封装的组件实例,具有很好的参考价值,希望对大家有所帮助。

本文用Vue2.0+elementUI的panel组件和table组件+echarts的柱状图和折线图实现对结果的展示,实现了表格和图之间的切换和图和表之间的转置。

-html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<p class="resultp">

  <p id="panels">

   <el-collapse>

    <el-collapse-item v-for="item in indicators">

    <template slot="title">

     <span class=&#39;resulticon&#39;>

      {{item.indicatorName}}

      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="el-icon-upload2" :class="item.indicatorName" download="somedata.xls" @click="return exportExcel(item.indicatorName)"

       data-command="show" title="保存为表"></a>

      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="glyphicon glyphicon-repeat" aria-hidden="true" @click="convert" data-command="show" title="图表切换"></a>

      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="glyphicon glyphicon-transfer" aria-hidden="true" @click="transpose" data-command="show" title="行列转置"></a>

     </span>

    </template>

    <template>

     <p v-show="tableAndMap==3?true:tableAndMap==1?true:false" :id="item.indicatorName"></p>

    </template>

    <template v-if="tableAndMap==3?true:tableAndMap==2?true:false">

     <el-table :data="item.tableData" max-height="300" stripe border fix style="width: 100%">

      <el-table-column v-for="(column,index) in item.columns" :prop="column" :fixed="index==0" :label="column" min-width="150"></el-table-column>

     </el-table>

    </template>

    </el-collapse-item>

   </el-collapse>

  </p>

 </p>

Copy after login

js,panel组件的代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

var panelsVue = new Vue({

 el : "#panels",

 props : ["initData","indicators","mapOptions"],

 data : {

  rowOrColumn : false, //行列转换

  tableOrMap : true, //表和图切换

  tableAndMap : 3, //表和图同时显示

  mapInitOption : {

    title: {

     text: &#39;&#39;

    },

    tooltip : {

     trigger: &#39;axis&#39;

    },

    toolbox: {

     show : true,

     feature : {

      mark : {show: true},

      dataView : {show: true, readOnly: false},

      magicType : {show: true, type: [&#39;line&#39;, &#39;bar&#39;]},

      restore : {show: true},

      saveAsImage : {show: true}

     }

    },

    calculable : true,

    xAxis : [

     {

      type : &#39;category&#39;,

      boundaryGap : false

     }

    ],

    yAxis : [

     {

      type : &#39;value&#39;,

      axisLabel : {

       formatter: &#39;{value}&#39;

      }

     }

    ]

   } //echarts 初始化参数

 },

 methods:{

  table : function(ev){

   if(this.rowOrColumn){

    this.indicators=this.listToRowObject(this.initData);

    this.mapOptions= this.listToColumnMap(this.initData);

    this.rowOrColumn=false;

   }else{

    this.indicators=this.listToColumnObject(this.initData);

    this.mapOptions= this.listToRowMap(this.initData);

    this.rowOrColumn=true;

   }

   for(var i=0;i<this.mapOptions.length;i++){

    var indicatorName= this.mapOptions[i].title.text;

    var dom = document.getElementById([indicatorName])

    var heigth = $(dom).siblings(&#39;p&#39;).height()*1.5;

    var width = $(dom).siblings(&#39;p&#39;).width();

    $(dom).css({

     height:heigth,

     width:width

    });

    var myChart= echarts.init(document.getElementById([indicatorName]),&#39;macarons&#39;);

    myChart.setOption(this.mapOptions[i]);

   }

   ev.stopPropagation();

  },

  listToRowObject :function (ListAndList){

   var indicatorNames=[];

   var tableDatas=[];

   var columns = [];

   var options = [];

   ListAndList = ListAndList.indicatorResult;

   for(var i=0;i<ListAndList.indicatorNames.length;i++){

    var objects=[];

    var column =[];

    var indicatorName = ListAndList.indicatorNames[i];

    for(var yIndex in ListAndList[indicatorName]){

     var obj = {};

     obj[indicatorName]=ListAndList.colKeys[yIndex];

     for(var xIndex in ListAndList[indicatorName][yIndex]){

      obj[ListAndList.rowKeys[xIndex]]=ListAndList[indicatorName][yIndex][xIndex];

     }

     objects.push(obj);

    }

    indicatorNames.push(indicatorName);

    column.push(indicatorName);

    column=column.concat(ListAndList.rowKeys);

    var indicator={};

    indicator[indicatorName]=objects;

    columns.push(column);

    tableDatas.push(indicator);

   }

   for(var j = 0; j<indicatorNames.length;j++){

    var indicatorObj = {};

    indicatorObj["tableData"]=tableDatas[j][indicatorNames[j]];

    indicatorObj["columns"] = columns[j];

    indicatorObj["indicatorName"] = indicatorNames[j];

    options.push(indicatorObj);

   }

   return options;

   },

   listToColumnObject :function (ListAndList) {

    var options = [];

    var columns = [];

    var indicatorNames = [];

    var indicatorMap = {};

    ListAndList = ListAndList.indicatorResult;

    for (var i = 0; i < ListAndList.indicatorNames.length; i++) {

     var column = [];

     var objs = [];

     var indicatorName = ListAndList.indicatorNames[i];

     indicatorNames.push(indicatorName);

     column.push(indicatorName);

     column = column.concat(ListAndList.colKeys);

     columns.push(column);

     var indicatorData = [];

     indicatorData.push(ListAndList.rowKeys);

     indicatorData = indicatorData.concat(ListAndList[indicatorName]);

     for (var k = 0; k < indicatorData[0].length; k++) {

      var aRow = {};

      for (var j = 0; j < indicatorData.length; j++) {

       aRow[column[j]] = indicatorData[j][k];

      }

      objs.push(aRow);

     }

     indicatorMap[indicatorName] = objs;

    }

    for (var j = 0; j < indicatorNames.length; j++) {

     var indicatorObj = {};

     indicatorObj["tableData"] = indicatorMap[indicatorNames[j]];

     indicatorObj["columns"] = columns[j];

     indicatorObj["indicatorName"] = indicatorNames[j];

     options.push(indicatorObj);

    }

    return options;

   },

   listToColumnMap: function(ListAndList){

     ListAndList = ListAndList.indicatorResult;

     var options=[];

     for(var j = 0;j<ListAndList.indicatorNames.length;j++){

      var sigleOption ={};

      sigleOption=JSON.parse(JSON.stringify(this.mapInitOption));//实现深复制

      sigleOption.xAxis[0]["data"]=ListAndList.rowKeys;

      var indicatorName = ListAndList.indicatorNames[j];

      sigleOption["title"]["text"]=indicatorName;

      var series =[];

      for(var k=0;k<ListAndList[indicatorName].length;k++){

       var sigleSerie={type:&#39;line&#39;};

       sigleSerie["name"] = ListAndList.colKeys[k];

       sigleSerie["data"] = ListAndList[indicatorName][k];

       series.push(sigleSerie);

      }

      sigleOption["series"]=series;

      options.push(sigleOption);

     };

     return options;

   },

   listToRowMap: function(ListAndList){

     ListAndList = ListAndList.indicatorResult;

     var options=[];

     for(var j = 0;j<ListAndList.indicatorNames.length;j++){

      var sigleOption ={};

      sigleOption=JSON.parse(JSON.stringify(this.mapInitOption));//实现深复制

      sigleOption.xAxis[0]["data"]=ListAndList.colKeys;

      var indicatorName = ListAndList.indicatorNames[j];

      sigleOption["title"]["text"]=indicatorName;

      var series =[];

      for(var k=0;k<ListAndList.rowKeys.length;k++){

       var sigleSerie={type:&#39;line&#39;};

       var x= [];

       for(var z = 0;z<ListAndList.colKeys.length;z++){

        x.push(ListAndList[indicatorName][z][k]);

       }

       sigleSerie["name"] = ListAndList.rowKeys[k];

       sigleSerie["data"] = x;

       series.push(sigleSerie);

      }

      sigleOption["series"]=series;

      options.push(sigleOption);

     };

     return options;

   },

   map : function(ev){

    if(this.tableAndMap==1){

     this.tableAndMap=2;

    }else if(this.tableAndMap==2){

     this.tableAndMap=3;

    }else{

     this.tableAndMap=1;

    }

    ev.stopPropagation();

   },

   exportExcel : function(indicatorName,my){

    debugger;

    console.log(indicatorName);

    var listAndList = JSON.parse(JSON.stringify(this.initData.indicatorResult));

    var rowTd = listAndList.rowKeys;

    var excellData=[];

    rowTd.splice(0,0,indicatorName);

    excellData.push(rowTd);

    for(var i = 0;i<listAndList[indicatorName].length;i++){

     var rowTr = listAndList[indicatorName][i];

     rowTr.splice(0,0,listAndList.colKeys[i]);

     excellData.push(rowTr);

    }

    return ExcellentExport.excelByData($("."+indicatorName)[0], excellData, &#39;Sheet&#39;, &#39;download&#39; + new Date().getTime() + &#39;.xls&#39;);

   }

 },

 watch : {

  initData : function(newValue){

   this.indicators=this.listToRowObject(newValue);

  }

 },

 mounted : function(){

 }

});

Vue.set(panelsVue,&#39;initData&#39;,ListAndList);

Copy after login

在使用上述组件过程中,发现当转置和表格切换之后里面全部都有变化,虽然可以做到单个panel组件自己实现转置和切换,但是发现如果数据太多会导致页面卡死,为了性能优化所以后来考虑采用多vue对象的形式(虽然我的思路是如果改变数据之后,vue将重新渲染html,导致页面卡死,但是后来仔细查资料之后,发现vue当数据改变之后会复用原来相同的html。但是由于时间的原因,也没试。大家可以考虑一下)

采用多vue对象的形式之后的页面

html

1

<p class="resultp"></p>

Copy after login

js,panel组件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

var panelsVueArr = [];

var responseData;

function createHtml(respData){

 var indicatorResult = respData.indicatorResult;

 var indicators = [];

 for(var j=0;j<indicatorResult.indicatorNames.length;j++){

  var indicator = {};

  indicator["indicatorName"]=indicatorResult.indicatorNames[j];

  indicator["indicatorUnit"]=indicatorResult.indicatorUnits[j];

  indicator["rowKeys"]=indicatorResult.rowKeys;

  indicator["colKeys"]=indicatorResult.colKeys;

  indicator["indicatorData"]=indicatorResult[indicatorResult.indicatorNames[j]];

  indicators.push(indicator);

 }

 for(var i =0;i<indicators.length;i++){

  var el = $("<p></p>");

  $(".resultp").append(el[0]);

  var vueObj = new Vue({

   el : el[0],

   template : &#39;<p id="panels"><el-collapse><el-collapse-item>&#39;+

   &#39;<template slot="title"><span class="resulticon">{{item.indicatorName}}({{item.indicatorUnit}}) <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="el-icon-upload2" :class="item.indicatorName" download="somedata.xls" @click="exportExcel" data-command="show" title="保存为表"></a>&#39;+

   &#39;<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="glyphicon glyphicon-repeat" aria-hidden="true" @click="convert" data-command="show" title="图表切换"></a><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="glyphicon glyphicon-transfer" aria-hidden="true" @click="transpose" data-command="show" title="行列转置"></a>&#39;+

  &#39;</span></template><template><p v-show="!tableAndMap" :id="item.indicatorName"></p></template><template v-if="tableAndMap"><el-table :data="item.tableData" max-height="300" stripe border fix fit style="width: 100%">&#39;+

   &#39;<el-table-column v-for="(column,index) in item.columns" :prop="column" :fixed="index==0" :label="column" :min-width="column.length<8?118:column.length>16?250:column.length*15"></el-table-column></el-table></template></el-collapse-item></el-collapse></p>&#39;,

   props : [&#39;item&#39;,&#39;mapOption&#39;],

   data : {

    indicator : indicators[i],

    rowOrColumn : false, // 行列转换

    tableOrMap : true, // 表和图切换

    tableAndMap : true, // 表和图同时显示

    indexid : i,

    mapInitOption : {

     title : {

      text : &#39;&#39;,

      show : false

     },

     tooltip : {

      trigger : &#39;item&#39;,

      formatter: &#39;&#39;

     },

     legend : {

      data : [],

      right : 90, // 不要遮住右边的按钮

      left : 85,

      padding : 10

     },

     toolbox : {

      show : true,

      feature : {

       mark : {

        show : true

       },

       magicType : {

        show : true,

        type : [&#39;line&#39;, &#39;bar&#39;]

       },

       restore : {

        show : true

       },

       saveAsImage : {

        show : true

       }

      }

     },

     grid : {

      y : &#39;&#39;,

      y2 : &#39;&#39;,

      containLabel : true

     },

     calculable : true,

     xAxis : [{

       type : &#39;category&#39;,

       boundaryGap : false,

       axisLabel : {

        interval : 0

       // rotate : 45

       }

      }

     ],

     yAxis : [{

       type : &#39;value&#39;,

       axisLabel : {

        formatter : yAxisFormatter

       }

      }

     ]

    } // echarts 初始化参数

   },

   methods : {

    transpose : function (ev) {

     if (this.rowOrColumn) {

      this.item = this.listToRowObject(this.indicator);

      this.mapOption = this.listToRowMap(this.indicator);

      this.rowOrColumn = false;

     } else {

      this.item = this.listToColumnObject(this.indicator);

      this.mapOption = this.listToColumnMap(this.indicator);

      this.rowOrColumn = true;

     }

      var indicatorName = this.mapOption.title.text;

      var myChart = echarts.init(document.getElementById([indicatorName]),rmp_theme);

      var grid = computerGrid(this.mapOption);

      myChart.resize({

       width : grid.chartWidth+"px",

       height : grid.chartHeight+"px"

      });

      myChart.setOption(this.mapOption);

     ev.stopPropagation();

    },

    listToColumnObject : function (ListAndList) {

     var x_y = column.text+"\\"+row.text;

     var itemTable ={};

     var columnR = [];

     var tableData=[];

     for (var yIndex in ListAndList.indicatorData) {

      var obj = {};

      obj[x_y] = ListAndList.colKeys[yIndex];

      for (var xIndex in ListAndList.indicatorData[yIndex]) {

       obj[ListAndList.rowKeys[xIndex]] =cellsDeal(ListAndList.indicatorData[yIndex][xIndex],ListAndList.indicatorUnit);

      }

      tableData.push(obj);

      }

     columnR.push(x_y);

     columnR = columnR.concat(ListAndList.rowKeys);

     itemTable["indicatorName"]=ListAndList.indicatorName;

     itemTable["tableData"] = tableData;

     itemTable["columns"]=columnR;

     itemTable["indicatorUnit"]=ListAndList.indicatorUnit;

     return itemTable;

    },

    listToRowObject : function (ListAndList) {

     var itemTable ={};

     var indicatorMap = {};

     var indicatorData=[];

     var y_x = row.text+"\\"+column.text;

     var columnR = [];

     var tableData = [];

     columnR.push(y_x);

     columnR = columnR.concat(ListAndList.colKeys);

     indicatorData.push(ListAndList.rowKeys);

     indicatorData = indicatorData.concat(ListAndList.indicatorData);

     for (var k = 0; k < indicatorData[0].length; k++) {

      var aRow = {};

      for (var j = 0; j < indicatorData.length; j++) {

       if(j==0){

        aRow[columnR[j]] = indicatorData[j][k];

       }else{

        aRow[columnR[j]] = cellsDeal(indicatorData[j][k],ListAndList.indicatorUnit);

       }

      }

      tableData.push(aRow);

      }

     itemTable["indicatorName"]=ListAndList.indicatorName;

     itemTable["tableData"] = tableData;

     itemTable["columns"]=columnR;

     itemTable["indicatorUnit"]=ListAndList.indicatorUnit;

     return itemTable;

    },

    listToColumnMap : function (ListAndList) {

     // var echartOption = echarts.getInstanceByDom(document.getElementById(ListAndList.indicatorName)).getOption();

     // var mapType = echarts.getInstanceByDom(document.getElementById(ListAndList.indicatorName)).getOption().series[0].type;

     var options = [];

      var sigleOption = {};

      sigleOption = this.mapInitOption; // 实现深复制

      var rowKeys = JSON.parse(JSON.stringify(ListAndList.rowKeys));

      rowKeys.pop();

      sigleOption.xAxis[0]["data"] = rowKeys;

      var indicatorName = ListAndList.indicatorName;

      sigleOption["title"]["text"] = indicatorName;

      var series = [];

      for (var k = 0; k < ListAndList.indicatorData.length - 1; k++) {

       var sigleSerie = {

        type : &#39;line&#39;,

        barMaxWidth : 40,

        barMinHeight : 15

       };

       sigleSerie["name"] = ListAndList.colKeys[k];

       var rows = JSON.parse(JSON.stringify(ListAndList.indicatorData[k]))

       rows.pop();

       sigleSerie["data"] = rows;

       series.push(sigleSerie);

      }

      sigleOption["series"] = series;

      var legendData = JSON.parse(JSON.stringify(ListAndList.colKeys));

      legendData.pop();

      sigleOption.legend.data = legendData;

      var unitHandle=ListAndList.indicatorUnit;

      sigleOption.tooltip.formatter=function (params,ticket,callback) {

       var myUnit =unitHandle;

       var html = &#39;<span style="display:inline-block;margin-right:5px;"&#39;+

       &#39;>行:&#39;+params.seriesName +&#39;</span><br>&#39;;

       html+=&#39;<span style="display:inline-block;margin-right:5px;&#39;+

       &#39;">列:&#39;+params.name +&#39;</span><br>&#39;;

       var showValue = params.value;

       if (typeof (showValue) == "undefined") {

        showValue = "NoData";

       } else {

        // 图悬浮框 千分位+万 +单位

        if (!isNaN(showValue)) {

         if (showValue > 10000) {

          showValue = toThousands((showValue / 10000).toFixed(1)) + $.i18n.get(&#39;chart.wan&#39;)+ myUnit;

         }else{

          if(unitHandle==&#39;%&#39;){

           showValue=parseFloat(showValue)*100;

           showValue = showValue.toFixed(1) + myUnit;

          }else{

           showValue = showValue.toFixed(1) + myUnit;

          }

         }

        }

       }

       html+=&#39;<span style="display:inline-block;margin-right:5px;&#39;+

       &#39;">值:&#39;+showValue +&#39;</span>&#39;;

       return html;

      };

     return sigleOption;

    },

    listToRowMap : function (ListAndList) {

     /* var mapType;

     if(typeof(this.mapOptions)==&#39;undefined&#39;){

      mapType=&#39;line&#39;;

     }else{

      mapType = echarts.getInstanceByDom(document.getElementById(ListAndList.indicatorNames[0])).getOption().series[0].type;

     }*/

     var options = [];

      var sigleOption = {};

      sigleOption = this.mapInitOption; // 实现深复制

      var colKeys = JSON.parse(JSON.stringify(ListAndList.colKeys));

      colKeys.pop();

      sigleOption.xAxis[0]["data"] = colKeys;

      var indicatorName = ListAndList.indicatorName;

      sigleOption["title"]["text"] = indicatorName;

      var series = [];

      for (var k = 0; k < ListAndList.rowKeys.length - 1; k++) { // 图TTL指标去掉

       var sigleSerie = {

        type : &#39;line&#39;,

        barMaxWidth : 40,

        barMinHeight : 15

       };

       var x = [];

       for (var z = 0; z < ListAndList.colKeys.length - 1; z++) {

        x.push(ListAndList.indicatorData[z][k]);

       }

       sigleSerie["name"] = ListAndList.rowKeys[k];

       sigleSerie["data"] = x;

       series.push(sigleSerie);

      }

      sigleOption["series"] = series;

      var legendData = JSON.parse(JSON.stringify(ListAndList.rowKeys));

      legendData.pop();

      sigleOption.legend.data = legendData;

      var unitHandle=ListAndList.indicatorUnit;

      sigleOption.tooltip.formatter=function (params,ticket,callback) {

       var myUnit =unitHandle;

       var color = params.color;

       var html = &#39;<span style="display:inline-block;margin-right:5px;"&#39;

       + &#39;">行:&#39;+params.seriesName +&#39;</span><br>&#39;;

       html+=&#39;<span style="display:inline-block;margin-right:5px;"&#39;

       + &#39;">列:&#39;+params.name +&#39;</span><br>&#39;;

       var showValue = params.value;

       if (typeof (showValue) == "undefined") {

        showValue = "NoData";

       } else {

        // 图悬浮框 千分位+万 +单位

        if (!isNaN(showValue)) {

         if (showValue > 10000) {

          showValue = toThousands((showValue / 10000).toFixed(1)) + $.i18n.get(&#39;chart.wan&#39;)+myUnit;

         }else{

          if(unitHandle==&#39;%&#39;){

           showValue=parseFloat(showValue)*100;

           showValue = showValue.toFixed(1) + myUnit;

          }else{

           showValue = showValue.toFixed(1) + myUnit;

          }

         }

        }

       }

       html+=&#39;<span style="display:inline-block;margin-right:5px;"&#39;

       + &#39;">值:&#39;+showValue +&#39;</span>&#39;;

       return html;

      };

     return sigleOption;

    },

    convert : function (ev) {

     if (this.tableAndMap) {

      this.tableAndMap = false;

     } else {

      this.tableAndMap = true;

     }

     var indicatorName = this.mapOption.title.text;

     var myChart = echarts.init(document.getElementById([indicatorName]),rmp_theme);

     var grid = computerGrid(this.mapOption);

     myChart.resize({

      width : grid.chartWidth+"px",

      height : grid.chartHeight+"px"

     });

     myChart.setOption(this.mapOption);

     ev.stopPropagation();

    },

    exportExcel : function (ev) {

     var listAndList = JSON.parse(JSON.stringify(this.indicator));

     var rowTd = listAndList.rowKeys;

     var excellData = [];

     rowTd.splice(0, 0, listAndList.indicatorName+&#39;(&#39;+listAndList.indicatorUnit+&#39;)&#39;);

     excellData.push(rowTd);

     for (var i = 0; i < listAndList.indicatorData.length; i++) {

      for(var j=0;j<listAndList.indicatorData[i].length;j++){

       listAndList.indicatorData[i][j]=cellsDeal(listAndList.indicatorData[i][j],listAndList.indicatorUnit);

      }

      var rowTr = listAndList.indicatorData[i];

      rowTr.splice(0, 0, listAndList.colKeys[i]);

      excellData.push(rowTr);

     }

     ExcellentExport.excelByData($("." + listAndList.indicatorName)[0], excellData, &#39;Sheet&#39;, &#39;download&#39; + new Date().getTime() + &#39;.xls&#39;);

     return ev.stopPropagation();

    }

   },

   watch : {

    indicator : function (newValue) {

    }

   },

   mounted : function () {

   // this.item= this.listToRowObject(this.indicator);

   },

   beforeMount : function(){

    this.item= this.listToRowObject(this.indicator);

    this.mapOption = this.listToRowMap(this.indicator);

   }

  })

  panelsVueArr.push(vueObj);

 }

}

//格式化Y轴数字显示

var yAxisFormatter = function(value, index) {

 var text = value;

 if (!isNaN(value)) {

  if (value > 10000) {

   // 千分位 + 万

   text = toThousands((value / 10000).toFixed(1)) + $.i18n.get(&#39;chart.wan&#39;);

  }

 }

 if (value.formatter) {

  text = value.formatter.replace("{value}", text);

 }

 return text;

}

//格式化tooltip

var tooltipFormatter = function (params,ticket,callback) {

 console.log(params);

 var color = params.color;

 var html = &#39;<span style="display:inline-block;margin-right:5px;&#39; + &#39;border-radius:10px;width:9px;height:9px;background-color:&#39;

 + color + &#39;">行:&#39;+params.seriesName +&#39;</span>&#39;;

 html+=&#39;<span style="display:inline-block;margin-right:5px;&#39; + &#39;border-radius:10px;width:9px;height:9px;background-color:&#39;

 + color + &#39;">列:&#39;+params.name +&#39;</span>&#39;;

 var showValue = params.value;

 if (typeof (showValue) == "undefined") {

  showValue = "NoData";

 } else {

  // 图悬浮框 千分位+万 +单位

  if (!isNaN(showValue)) {

   if (showValue > 10000||showValue<-10000) {

    showValue = toThousands((showValue / 10000).toFixed(1)) + $.i18n.get(&#39;chart.wan&#39;);

   }else{

    showValue=parseFloat(showValue)*100;

    showValue = showValue.toFixed(1) + unitHandle();

   }

  }

 }

 html+=&#39;<span style="display:inline-block;margin-right:5px;&#39; + &#39;border-radius:10px;width:9px;height:9px;background-color:&#39;

 + color + &#39;">值:&#39;+showValue +&#39;</span>&#39;;

 console.log(html);

 return html;

}

// 数字格式处理 1,000,000

function toThousands(num) {

 if (typeof (num) == &#39;undefined&#39;) {

  num = ""

 }

 num = num + &#39;&#39;, result = &#39;&#39;;

 if (num.indexOf(&#39;%&#39;) > -1) {

  return num;

 }

 var s = "";

 if (num.indexOf(&#39;.&#39;) > -1) {

  s = num.substring(num.indexOf(&#39;.&#39;), num.length);

  num = num.substring(0, num.indexOf(&#39;.&#39;));

 }

 var n = false;

 if (num.indexOf(&#39;-&#39;) > -1) {

  num = num.substring(1);

  n = true;

 }

 while (num.length > 3) {

  result = &#39;,&#39; + num.slice(-3) + result;

  num = num.slice(0, num.length - 3);

 }

 if (num != undefined) {

  result = num + result;

 }

 if (n) {

  result = "-" + result;

 }

 if(s==&#39;.0&#39;){

  return result;

 }

 return result + s;

}

// 千分位与单位处理

function cellsDeal(num,unit) {

 if (typeof (num) == &#39;undefined&#39;) {

  num = "";

 }

 if(num===&#39;&#39;){

  return num;

 }

 num = num + &#39;&#39;, result = &#39;&#39;;

 if (unit==&#39;%&#39;) {

  num=parseFloat(num)*100;

  num = num.toFixed(1) + &#39;&#39;;

  if(num.indexOf(".")!=-1){

   return num.substring(0,num.indexOf(".")+2)+"%";

  }else{

   return num+"%";

  }

 }

 var s = "";

 if (num.indexOf(&#39;.&#39;) > -1) {

  num=parseFloat(num).toFixed(1);

  s = num.substring(num.indexOf(&#39;.&#39;), num.length); //小数位

  num = num.substring(0, num.indexOf(&#39;.&#39;)); //整数位

 }

 var n = false;

 if (num.indexOf(&#39;-&#39;) > -1) {

  num = num.substring(1);

  n = true;

 }

 while (num.length > 3) {

  result = &#39;,&#39; + num.slice(-3) + result;

  num = num.slice(0, num.length - 3);

 }

 if (num != undefined) {

  result = num + result;

 }

 if (n) {

  result = "-" + result;

 }

 if(unit.indexOf("/")!=-1){

  s=s.substring(0,2);

 }else{

  s="";

 }

 return result + s;

}

/*动态计算echarts的grid属性 */

function computerGrid(options){

 // 图宽度 默认

 var chartWidth = 810;

 // 图例占宽度比

 var legendWidth = chartWidth * 0.8;

 // 图高度默认

 var chartHeight = 250;

 // 图中grid离容器下边距高度默认

 var bottomHeight = 25;

 // 图中grid离容器上边距高度默认

 var topHeight = 40;

 // 根据x轴刻度数量 算宽度,如果超过默认 则使用计算值

 if (options.xAxis[0].data.length * 30 - chartWidth > 0) {

  chartWidth = options.xAxis[0].data.length * 30;

 }

 // x轴刻度 最长的长度值

 var maxLength = 0;

 var legendCount = 8;

 if (options.xAxis[0].data.length > legendCount) {

  options.xAxis[0].data.forEach(function(val) {

   if (maxLength < val.length) {

    maxLength = val.length;

    if (/[^\u0000-\u00FF]/.test(val)) {

     // 计算图中grid离容器下边距高度

     bottomHeight = maxLength * 14;

    } else {

     // 计算图中grid离容器下边距高度

     bottomHeight = maxLength * 13.5;

    }

   }

  });

 }

 var tmpWidth = 0;

 options.legend.data.forEach(function(val) {

  if (/[^\u0000-\u00FF]/.test(val)) {

   tmpWidth += val.length * 22 + 30;

  } else {

   tmpWidth += val.length * 11 + 30;

  }

 });

 var rowNum = tmpWidth / legendWidth;

 // 根据图例算 图中grid离容器上边距高度

 if (rowNum > 1) {

  topHeight += (rowNum - 1) * 23;

 }

 chartHeight += bottomHeight + topHeight;

 options.legend[&#39;width&#39;] = legendWidth;

 options.grid.y2 = bottomHeight;

 options.grid.y = topHeight;

 if(chartWidth!=&#39;810&#39;){

  options.grid["x"]=40;

 }

 var columnAndRow = [&#39;startProvince&#39;,&#39;startArea&#39;]; //始发省份和地区默认X轴旋转45度

 if(options.xAxis[0].data[0].match(&#39;^(\\d+)\\+(\\d+)&#39;)!=null||columnAndRow.indexOf(column.code)!=-1||columnAndRow.indexOf(row.code)!=-1){

  options.xAxis[0].axisLabel[&#39;rotate&#39;]=45;

 }else{

  options.xAxis[0].axisLabel[&#39;rotate&#39;]=0;

 }

 return {chartHeight:chartHeight,chartWidth:chartWidth};

}

Copy after login

上述代码实现了 echart图数据的格式化,和对数据的自适应。修改为上述方式之后发现性能提高了不止一个数量级。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在Vue.directive中发现有关自定义指令的问题

详细讲解JavaScript图片处理与合成技术(详细教程)

如何实现微信web端后退强制刷新功能(详细教程)

The above is the detailed content of How to implement encapsulated components through VUE2.0+Element-UI+Echarts. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Issues
javascript - element-ui compatibility issue.
From 1970-01-01 08:00:00
0
0
0
javascript - Element UI table wrong row
From 1970-01-01 08:00:00
0
0
0
html - element ui dialog box nesting
From 1970-01-01 08:00:00
0
0
0
javascript - Style issues about element ui
From 1970-01-01 08:00:00
0
0
0
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template