Open ladeng8888 opened 6 years ago
| <!DOCTYPE html>
-- | --
| <html lang="en">
| <head>
| <meta charset="UTF-8">
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| <meta http-equiv="X-UA-Compatible" content="ie=edge">
| <title>Document</title>
| <style>
| *{
| margin:0;
| padding:0;
| }
| .container{
| display: flex;
| }
| #left{
| flex:1;
| height:400px;
| }
| #right{
| flex:1;
| height: 400px;
| }
| </style>
| </head>
| <body>
| <div class="container">
| <div id="left"></div>
| <div id="right"></div>
| </div>
| <script src="./echarts.min.js"></script>
| <script>
| // 基于准备好的dom,初始化echarts实例
| var myChart1 = echarts.init(document.getElementById('left'));
|
| // 指定图表的配置项和数据
| var option1 = {
| title: {
| text: 'ECharts 入门示例'
| },
| tooltip: {},
| legend: {
| data: ['销量']
| },
| xAxis: {
| data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
| },
| yAxis: {},
| series: [{
| name: '销量',
| type: 'bar',
| data: [5, 20, 36, 10, 10, 20]
| }]
| };
|
| // 使用刚指定的配置项和数据显示图表。
| myChart1.setOption(option1);
|
|
| // 基于准备好的dom,初始化echarts实例
| var myChart2 = echarts.init(document.getElementById('right'));
|
| // 指定图表的配置项和数据
| var option2 = {
| title: {
| text: 'ECharts 入门示例'
| },
| tooltip: {},
| legend: {
| data: ['销量']
| },
| xAxis: {
| data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
| },
| yAxis: {},
| series: [{
| name: '销量',
| type: 'bar',
| data: [5, 20, 36, 10, 10, 20]
| }]
| };
|
| // 使用刚指定的配置项和数据显示图表。
| myChart2.setOption(option2);
|
| window.onresize = function(){
| myChart1.resize()
| myChart2.resize();
| }
| </script>
| </body>
| </html>