echart 플러그인의 기본 사용법 소개 등-JS 튜토리얼-php.cn

이 글은 주로 echart의 소개를 소개하고 있는데, 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고하겠습니다. 편집기를 따라 살펴보겠습니다.

1. 플러그인 다운로드

다음은 ECharts의 다운로드 링크입니다. 물론 ECharts는 ZRender라는 다른 플러그인에도 의존합니다. 대부분의 차트 ZRender는 필요하지 않지만 지도 컨트롤 및 기타 복잡한 렌더링 컨트롤에는 ZRender가 필요합니다. 불필요한 문제를 방지하려면 EChart를 다운로드할 때 ZRender도 다운로드하는 것이 좋습니다.

ECharts 다운로드 주소: http://echarts.baidu.com/

ZRender 다운로드 주소: http://ecomfe.github.io/zrender/index.html

다운로드 후 해당 파일 디렉터리의 압축을 푼다. 구조는 다음과 같습니다:

ECharts:

ZRender:

2.
먼저 새 웹 애플리케이션을 만들고 방금 다운로드한 파일의 경우 구체적인 디렉터리 구조는 다음과 같습니다.

다음은 설명할 사항입니다.

2) 다른 부분은 zrender라는 폴더입니다. 여기서 특별한 주의가 필요한 것은 echarts의 js 파일에서 zrender에 대한 참조가 모두 zrender로 시작하기 때문에 폴더 이름을 zrender로 지정해야 한다는 것입니다. 루트 디렉터리에서 zrender 폴더의 내용은 1.의 zrender 파일 디렉터리에 있는 src 폴더의 내용입니다.

3 페이지에서의 구체적인 용도는 다음과 같습니다. 위의 단계를 구성한 후 페이지에서 참조할 수 있습니다. 지도의 참조는 다른 기본 그래픽의 참조와 다르기 때문에 여기서는 지도 컨트롤을 사용하는 방법을 주로 설명합니다. 다른 그래픽의 표현도 간략하게 설명합니다.

MapChart

먼저 2의 echarts 폴더(즉, Modules 폴더)와 동일한 디렉터리에 aspx 페이지 또는 html 페이지를 추가합니다. 렌더링할 p는 양식 태그 외부에 배치해야 합니다. 그렇지 않으면 그래픽이 표시되지 않습니다.

다음과 같이 head 태그에 echarts에 대한 참조를 추가합니다.

<strong><head runat="server"> 
  <title></title> 
  <script src="echarts/esl.js" type="text/javascript"></script> 
</head></strong>

로그인 후 복사

body 태그의 form 태그 외부에 차트 렌더링을 위한 컨테이너로 사용되는 p를 추가합니다.

<body> 
  
<p id="main"style="height:500px;border:1px solid #ccc;padding:10px;"></p> 
  
…………… 
  
…………… 
  
</body>

로그인 후 복사

위에 추가한 p 태그 아래에 다음과 같이 js 코드 조각을 추가합니다.

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

<script type="text/javascript"> 
  
    //为模块加载器配置echarts的路径，这里主要是配置map图表的路径，其他的图表跟map的配置还不太一样，下边也会做另一种类型的图表事例。 
这里引用的主要是echarts文件夹下的echarts-map文件，而其他类型的图表引用的都是echarts文件夹下的echarts文件。 
  
    require.config({ 
  
      paths: { 
  
        echarts:&#39;./echarts/echarts&#39;, 
  
        &#39;echarts/chart/map&#39;:&#39;./echarts/echarts-map&#39; 
  
      } 
  
    }); 
  
   //动态加载echarts，在回掉函数中使用，要注意保持按需加载结构定义图表路径 
  
    require( 
  
    [ 
  
      &#39;echarts&#39;, 
  
      &#39;echarts/chart/map&#39; 
  
    ], 
  
    function (ec) { 
  
      varmyChart=ecinit(documentgetElementById(&#39;main&#39;)); 
  
      //option主要是图标的一些设置，这不是这篇文章的重点，关于具体的设置可以参考官方的文档说明文档 
  
option= { 
  
        title: { 
  
          text:&#39;iphone销量&#39;, 
  
          subtext:&#39;纯属虚构&#39;, 
  
          x:&#39;center&#39; 
  
        }, 
  
        tooltip: { 
  
          trigger:&#39;item&#39; 
  
        }, 
  
        legend: { 
  
          orient:&#39;vertical&#39;, 
  
          x:&#39;left&#39;, 
  
          data: [&#39;iphone3&#39;,&#39;iphone4&#39;,&#39;iphone5&#39;] 
  
        }, 
  
        dataRange: { 
  
          min:0, 
  
          max:2500, 
  
          text: [&#39;高&#39;,&#39;低&#39;],      
  
          calculable:true, 
  
          textStyle: { 
  
            color:&#39;orange&#39; 
  
          } 
  
        }, 
  
        toolbox: { 
  
          show:true, 
  
          orient:&#39;vertical&#39;, 
  
          x:&#39;right&#39;, 
  
          y:&#39;center&#39;, 
  
          feature: { 
  
            mark:true, 
  
            dataView: { readOnly:false }, 
  
            restore:true, 
  
            saveAsImage:true 
  
          } 
  
        }, 
  
        series: [ 
  
    { 
  
      name:&#39;iphone3&#39;, 
  
      type:&#39;map&#39;, 
  
      mapType:&#39;china&#39;, 
  
      selectedMode: &#39;single&#39;, 
  
      itemStyle: { 
  
        normal: { label: { show:true },color:&#39;#ffd700&#39; },// for legend 
  
        emphasis: { label: { show:true} } 
  
      }, 
  
      data: [ 
  
        { name:&#39;北京&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;天津&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;上海&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;重庆&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;河北&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;河南&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;云南&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;辽宁&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;黑龙江&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;湖南&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;安徽&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;山东&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;新疆&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;江苏&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;浙江&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;江西&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;湖北&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;广西&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;甘肃&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;山西&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;内蒙古&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;陕西&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;吉林&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;福建&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;贵州&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;广东&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;青海&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;西藏&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;四川&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;宁夏&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;海南&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;台湾&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;香港&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;澳门&#39;,value:Math.round(Math.random() *1000) } 
  
      ] 
  
    }, 
  
    { 
  
      name:&#39;iphone4&#39;, 
  
      type:&#39;map&#39;, 
  
      mapType:&#39;china&#39;, 
  
      selectedMode: &#39;single&#39;, 
  
      itemStyle: { 
  
        normal: { label: { show:true },color:&#39;#ff8c00&#39; },// for legend 
  
        emphasis: { label: { show:true} } 
  
      }, 
  
      data: [ 
  
        { name:&#39;北京&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;天津&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;上海&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;重庆&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;河北&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;安徽&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;新疆&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;浙江&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;江西&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;山西&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;内蒙古&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;吉林&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;福建&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;广东&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;西藏&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;四川&#39;,value:Math.round(Math.random() *1000) }, 
 
        { name:&#39;宁夏&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;香港&#39;,value:Math.round(Math.random() *1000) }, 
        { name:&#39;澳门&#39;,value:Math.round(Math.random() *1000) } 
  
      ] 
  
    }, 
  
    { 
  
      name:&#39;iphone5&#39;, 
  
      type:&#39;map&#39;, 
  
      mapType:&#39;china&#39;, 
  
      selectedMode: &#39;single&#39;, 
  
      itemStyle: { 
  
        normal: { label: { show:true },color:&#39;#da70d6&#39; },// for legend 
  
        emphasis: { label: { show:true} } 
  
      }, 
  
      data: [ 
  
        { name:&#39;北京&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;天津&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;上海&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;广东&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;台湾&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;香港&#39;,value:Math.round(Math.random() *1000) }, 
  
        { name:&#39;澳门&#39;,value:Math.round(Math.random() *1000) } 
  
      ] 
  
    } 
  ] 
      }; 
       //以下的这段代码主要是用来处理用户的选择，应用场景是可以做地图的交互，比如点击地图上的某一个省，获取相应的省的指标变化等。 
       //需要特别注意的是，如果需要点击某一省作地图的操作交互的话，还需要为series属性的每一项添加一个selectedMode属性，这里的属性值为 &#39;single&#39;即单选，也可多选 
  varecConfig= require(&#39;echarts/config&#39;); 
      myChart.on(ecConfig.EVENT.MAP_SELECTED,function (param) { 
        varselected=param.selected; 
        varmapSeries=option.series[0]; 
        vardata= []; 
        varlegendData= []; 
        varname; 
        for (varp=0,len=mapSeries.data.length; p<len; p++) { 
          name=mapSeries.data[p].name; 
          mapSeries.data[p].selected=selected[name]; 
          if (selected[name]) { 
            alert(name); //这里只是简单的做一个事例说明，弹出用户所选的省，如需做其他的扩展，可以在这里边添加相应的操作  
  
          } 
        } 
      });         
      myChart.setOption(option); 
    } 
  ); 
  </script>

로그인 후 복사

위 작업을 완료한 후 효과는 다음과 같습니다.

LineChart

지도 차트를 제외한 다른 아이콘도 같은 방식으로 사용됩니다. 실제로 다른 차트와 지도 차트의 차이점은 구성 파일에 대한 참조입니다. 다음은 꺾은선형 차트의 예일 뿐이며 다른 예도 동일합니다.

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

<scripttype="text/javascript"> 
  
    require.config({ 
  
      paths: { 
  
        echarts:&#39;./echarts/echarts&#39;, 
  
        &#39;echarts/chart/bar&#39;:&#39;./echarts/echarts&#39;,//这里需要注意的是除了mapchart使用的配置文件为echarts-map之外， 
其他的图形引用的配置文件都为echarts，这也是一般的图形跟地图的区别 
  
        &#39;echarts/chart/line&#39;:&#39;./echarts/echarts&#39; 
  
      } 
  
    }); 
  
    require( 
  
    [ 
  
      &#39;echarts&#39;, 
  
      &#39;echarts/chart/bar&#39;, 
  
      &#39;echarts/chart/line&#39; 
  
    ], 
  
    function (ec) { 
  
      varmyChart=ecinit(documentgetElementById(&#39;main&#39;)); 
  
      option= { 
  
        tooltip: { 
  
          trigger:&#39;axis&#39; 
  
        }, 
  
        legend: { 
  
          data: [&#39;邮件营销&#39;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;直接问&#39;,&#39;搜索引擎&#39;] 
  
        }, 
  
        toolbox: { 
  
          show:true, 
  
          feature: { 
  
            mark:true, 
  
            dataView: { readOnly:false }, 
  
            magicType: [&#39;line&#39;,&#39;bar&#39;], 
  
            restore:true, 
  
            saveAsImage:true 
  
          } 
  
        }, 
  
        calculable:true, 
  
        xAxis: [ 
  
    { 
  
      type:&#39;category&#39;, 
  
      boundaryGap:false, 
  
      data: [&#39;周一&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;,&#39;周日&#39;] 
  
    } 
  
  ], 
  
        yAxis: [ 
  
    { 
  
      type:&#39;value&#39;, 
  
      splitArea: { show:true } 
  
    } 
  
  ], 
  
        series: [ 
  
    { 
  
      name:&#39;邮件营销&#39;, 
  
      type:&#39;line&#39;, 
  
      stack:&#39;总量&#39;, 
  
      data: [120,132,101,134,90,230,210] 
  
    }, 
  
    { 
  
      name:&#39;联盟广告&#39;, 
  
      type:&#39;line&#39;, 
  
      stack:&#39;总量&#39;, 
  
      data: [220,182,191,234,290,330,310] 
  
    }, 
  
    { 
  
      name:&#39;视频广告&#39;, 
  
      type:&#39;line&#39;, 
  
      stack:&#39;总量&#39;, 
  
      data: [150,232,201,154,190,330,410] 
  
    }, 
  
    { 
  
      name:&#39;直接访问&#39;, 
  
      type:&#39;line&#39;, 
  
      stack:&#39;总量&#39;, 
  
      data: [320,332,301,334,390,330,320] 
  
    }, 
  
    { 
  
      name:&#39;搜索引擎&#39;, 
  
      type:&#39;line&#39;, 
  
      stack:&#39;总量&#39;, 
  
      data: [820,932,901,934,1290,1330,1320] 
  
    } 
  
  ] 
  
      };           
  
      myChart.setOption(option); 
  
    } 
  
  ); 
  
  </script> 
  
  <pid="main1"style="height:500px;border:1px solid #ccc;padding:10px;"></p>   
  
  <scripttype="text/javascript"> 
  
    require.config({ 
  
      paths: { 
  
        echarts:&#39;./echarts/echarts&#39;, 
  
        &#39;echarts/chart/bar&#39;:&#39;./echarts/echarts&#39;, 
  
        &#39;echarts/chart/line&#39;:&#39;./echarts/echarts&#39; 
  
      } 
  
    }); 
  
    require( 
  
    [ 
  
      &#39;echarts&#39;, 
  
      &#39;echarts/chart/bar&#39;, 
  
      &#39;echarts/chart/line&#39; 
  
    ], 
  
    function (ec) { 
  
      varmyChart=ecinit(documentgetElementById(&#39;main1&#39;)); 
  
      option= { 
  
        title: { 
  
          text:&#39;未来一周气温变化&#39;, 
  
          subtext:&#39;纯属虚构&#39; 
  
        }, 
  
        tooltip: { 
  
          trigger:&#39;axis&#39; 
  
        }, 
  
        legend: { 
  
          data: [&#39;最高气温&#39;最低气温&#39;] 
  
        }, 
  
        toolbox: { 
  
          show:true, 
  
          feature: { 
  
            mark:true, 
  
            dataView: { readOnly:false }, 
  
            magicType: [&#39;line&#39;,&#39;bar&#39;], 
  
            restore:true, 
  
            saveAsImage:true 
  
          } 
  
        }, 
  
        calculable:true, 
  
        xAxis: [ 
  
    { 
  
      type:&#39;category&#39;, 
  
      boundaryGap:false, 
  
      data: [&#39;周一&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;,&#39;周日&#39;] 
  
    } 
  
  ], 
  
        yAxis: [ 
  
    { 
  
      type:&#39;value&#39;, 
  
      axisLabel: { 
  
        formatter:&#39;{value} &#39; 
  
      }, 
  
      splitArea: { show:true } 
  
    } 
  
  ], 
  
        series: [ 
  
    { 
  
      name:&#39;最高气温&#39;, 
  
      type:&#39;line&#39;, 
  
      itemStyle: { 
  
        normal: { 
  
          lineStyle: { 
  
            shadowColor:&#39;rgba(0,0,0,4)&#39; 
  
          } 
  
        } 
  
      }, 
  
      data: [11,11,15,13,12,13,10] 
  
    }, 
  
    { 
  
      name:&#39;最低气温&#39;, 
  
      type:&#39;line&#39;, 
  
      itemStyle: { 
  
        normal: { 
  
          lineStyle: { 
  
            shadowColor:&#39;rgba(0,0,0,4)&#39; 
  
          } 
  
        } 
  
      }, 
  
      data: [-2,1,2,5,3,2,0] 
  
    } 
  
  ] 
  
      };           
  
      myChart.setOption(option); 
  
    } 
  
  ); 
  
  </script> 
  
  <pid="main2"style="height:500px;border:1px solid #ccc;padding:10px;"></p>   
  
  <scripttype="text/javascript"> 
  
    require.config({ 
  
      paths: { 
  
        echarts:&#39;./echarts/echarts&#39;, 
  
        &#39;echarts/chart/bar&#39;:&#39;./echarts/echarts&#39;, 
  
        &#39;echarts/chart/line&#39;:&#39;./echarts/echarts&#39; 
  
      } 
  
    }); 
  
    require( 
  
    [ 
  
      &#39;echarts&#39;, 
  
      &#39;echarts/chart/bar&#39;, 
  
      &#39;echarts/chart/line&#39; 
  
    ], 
  
    function (ec) { 
  
      varmyChart=ec.init(document.getElementById(&#39;main2&#39;)); 
  
      option= { 
  
        title: { 
  
          text:&#39;某楼盘销售情况&#39;, 
  
          subtext:&#39;纯属虚构&#39; 
  
        }, 
  
        tooltip: { 
  
          trigger:&#39;axis&#39; 
  
        }, 
  
        legend: { 
  
          data: [&#39;意向&#39;,&#39;预购&#39;,&#39;成交&#39;] 
  
        }, 
  
        toolbox: { 
  
          show:true, 
  
          feature: { 
  
            mark:true, 
  
            dataView: { readOnly:false }, 
  
            magicType: [&#39;line&#39;,&#39;bar&#39;], 
  
            restore:true, 
  
            saveAsImage:true 
  
          } 
  
        }, 
  
        calculable:true, 
  
        xAxis: [ 
  
    { 
  
      type:&#39;category&#39;, 
  
      boundaryGap:false, 
  
      data: [&#39;周&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;,&#39;周日&#39;] 
  
    } 
  
  ], 
  
        yAxis: [ 
  
    { 
  
      type:&#39;value&#39; 
  
    } 
  
  ], 
  
        series: [ 
  
    { 
  
      name:&#39;成交&#39;, 
  
      type:&#39;line&#39;, 
  
      smooth:true, 
  
      itemStyle: { normal: { areaStyle: { type:&#39;default&#39;}} }, 
  
      data: [10,12,21,54,260,830,710] 
  
    }, 
  
    { 
  
      name:&#39;预购&#39;, 
  
      type:&#39;line&#39;, 
  
      smooth:true, 
  
      itemStyle: { normal: { areaStyle: { type:&#39;default&#39;}} }, 
  
      data: [30,182,434,791,390,30,10] 
  
    }, 
  
    { 
  
      name:&#39;意向&#39;, 
  
      type:&#39;line&#39;, 
  
      smooth:true, 
  
      itemStyle: { normal: { areaStyle: { type:&#39;default&#39;}} }, 
  
      data: [1320,1132,601,234,120,90,20] 
  
    } 
  
  ] 
  
      };           
  
      myChart.setOption(option); 
  
    } 
  
  ); 
  
  </script>