正在显示
1 个修改的文件
包含
22 行增加
和
143 行删除
| @@ -376,156 +376,35 @@ | @@ -376,156 +376,35 @@ | ||
| 376 | </div> | 376 | </div> |
| 377 | </div> | 377 | </div> |
| 378 | </div> | 378 | </div> |
| 379 | - <script SRC="/public/echarts.min.js"> | ||
| 380 | - var posList = [ | ||
| 381 | - 'left', 'right', 'top', 'bottom', | ||
| 382 | - 'inside', | ||
| 383 | - 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', | ||
| 384 | - 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight' | ||
| 385 | - ]; | ||
| 386 | - | ||
| 387 | - app.configParameters = { | ||
| 388 | - rotate: { | ||
| 389 | - min: -90, | ||
| 390 | - max: 90 | 379 | + <script SRC="/public/echarts.min.js"></script> |
| 380 | + <!-- 为ECharts准备一个具备大小（宽高）的Dom --> | ||
| 381 | + <div id="main" style="width: 600px;height:400px;"></div> | ||
| 382 | + <script type="text/javascript"> | ||
| 383 | + // 基于准备好的dom，初始化echarts实例 | ||
| 384 | + var myChart = echarts.init(document.getElementById('main')); | ||
| 385 | + | ||
| 386 | + // 指定图表的配置项和数据 | ||
| 387 | + var option = { | ||
| 388 | + title: { | ||
| 389 | + text: 'ECharts 入门示例' | ||
| 391 | }, | 390 | }, |
| 392 | - align: { | ||
| 393 | - options: { | ||
| 394 | - left: 'left', | ||
| 395 | - center: 'center', | ||
| 396 | - right: 'right' | ||
| 397 | - } | ||
| 398 | - }, | ||
| 399 | - verticalAlign: { | ||
| 400 | - options: { | ||
| 401 | - top: 'top', | ||
| 402 | - middle: 'middle', | ||
| 403 | - bottom: 'bottom' | ||
| 404 | - } | 391 | + tooltip: {}, |
| 392 | + legend: { | ||
| 393 | + data:['销量'] | ||
| 405 | }, | 394 | }, |
| 406 | - position: { | ||
| 407 | - options: echarts.util.reduce(posList, function (map, pos) { | ||
| 408 | - map[pos] = pos; | ||
| 409 | - return map; | ||
| 410 | - }, {}) | 395 | + xAxis: { |
| 396 | + data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] | ||
| 411 | }, | 397 | }, |
| 412 | - distance: { | ||
| 413 | - min: 0, | ||
| 414 | - max: 100 | ||
| 415 | - } | ||
| 416 | - }; | ||
| 417 | - | ||
| 418 | - app.config = { | ||
| 419 | - rotate: 90, | ||
| 420 | - align: 'left', | ||
| 421 | - verticalAlign: 'middle', | ||
| 422 | - position: 'insideBottom', | ||
| 423 | - distance: 15, | ||
| 424 | - onChange: function () { | ||
| 425 | - var labelOption = { | ||
| 426 | - normal: { | ||
| 427 | - rotate: app.config.rotate, | ||
| 428 | - align: app.config.align, | ||
| 429 | - verticalAlign: app.config.verticalAlign, | ||
| 430 | - position: app.config.position, | ||
| 431 | - distance: app.config.distance | ||
| 432 | - } | ||
| 433 | - }; | ||
| 434 | - myChart.setOption({ | 398 | + yAxis: {}, |
| 435 | series: [{ | 399 | series: [{ |
| 436 | - label: labelOption | ||
| 437 | - }, { | ||
| 438 | - label: labelOption | ||
| 439 | - }, { | ||
| 440 | - label: labelOption | ||
| 441 | - }, { | ||
| 442 | - label: labelOption | 400 | + name: '销量', |
| 401 | + type: 'bar', | ||
| 402 | + data: [5, 20, 36, 10, 10, 20] | ||
| 443 | }] | 403 | }] |
| 444 | - }); | ||
| 445 | - } | ||
| 446 | - }; | ||
| 447 | - | ||
| 448 | - | ||
| 449 | - var labelOption = { | ||
| 450 | - show: true, | ||
| 451 | - position: app.config.position, | ||
| 452 | - distance: app.config.distance, | ||
| 453 | - align: app.config.align, | ||
| 454 | - verticalAlign: app.config.verticalAlign, | ||
| 455 | - rotate: app.config.rotate, | ||
| 456 | - formatter: '{c} {name|{a}}', | ||
| 457 | - fontSize: 16, | ||
| 458 | - rich: { | ||
| 459 | - name: { | ||
| 460 | - textBorderColor: '#fff' | ||
| 461 | - } | ||
| 462 | - } | ||
| 463 | }; | 404 | }; |
| 464 | 405 | ||
| 465 | - option = { | ||
| 466 | - color: ['#003366', '#006699', '#4cabce', '#e5323e'], | ||
| 467 | - tooltip: { | ||
| 468 | - trigger: 'axis', | ||
| 469 | - axisPointer: { | ||
| 470 | - type: 'shadow' | ||
| 471 | - } | ||
| 472 | - }, | ||
| 473 | - legend: { | ||
| 474 | - data: ['Forest', 'Steppe', 'Desert', 'Wetland'] | ||
| 475 | - }, | ||
| 476 | - toolbox: { | ||
| 477 | - show: true, | ||
| 478 | - orient: 'vertical', | ||
| 479 | - left: 'right', | ||
| 480 | - top: 'center', | ||
| 481 | - feature: { | ||
| 482 | - mark: {show: true}, | ||
| 483 | - dataView: {show: true, readOnly: false}, | ||
| 484 | - magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']}, | ||
| 485 | - restore: {show: true}, | ||
| 486 | - saveAsImage: {show: true} | ||
| 487 | - } | ||
| 488 | - }, | ||
| 489 | - xAxis: [ | ||
| 490 | - { | ||
| 491 | - type: 'category', | ||
| 492 | - axisTick: {show: false}, | ||
| 493 | - data: ['2012', '2013', '2014', '2015', '2016'] | ||
| 494 | - } | ||
| 495 | - ], | ||
| 496 | - yAxis: [ | ||
| 497 | - { | ||
| 498 | - type: 'value' | ||
| 499 | - } | ||
| 500 | - ], | ||
| 501 | - series: [ | ||
| 502 | - { | ||
| 503 | - name: 'Forest', | ||
| 504 | - type: 'bar', | ||
| 505 | - barGap: 0, | ||
| 506 | - label: labelOption, | ||
| 507 | - data: [320, 332, 301, 334, 390] | ||
| 508 | - }, | ||
| 509 | - { | ||
| 510 | - name: 'Steppe', | ||
| 511 | - type: 'bar', | ||
| 512 | - label: labelOption, | ||
| 513 | - data: [220, 182, 191, 234, 290] | ||
| 514 | - }, | ||
| 515 | - { | ||
| 516 | - name: 'Desert', | ||
| 517 | - type: 'bar', | ||
| 518 | - label: labelOption, | ||
| 519 | - data: [150, 232, 201, 154, 190] | ||
| 520 | - }, | ||
| 521 | - { | ||
| 522 | - name: 'Wetland', | ||
| 523 | - type: 'bar', | ||
| 524 | - label: labelOption, | ||
| 525 | - data: [98, 77, 101, 99, 40] | ||
| 526 | - } | ||
| 527 | - ] | ||
| 528 | - }; | 406 | + // 使用刚指定的配置项和数据显示图表。 |
| 407 | + myChart.setOption(option); | ||
| 529 | </script> | 408 | </script> |
| 530 | <!--<script>--> | 409 | <!--<script>--> |
| 531 | <!--var Orderdata = {--> | 410 | <!--var Orderdata = {--> |
-
请 注册 或 登录 后发表评论