echarts example

by jeffersonswartz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

JavaScript

// 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById('main'));
 var colors = ['#5793f3', '#d14a61', '#675bba'];

 // 指定图表的配置项和数据
 var option = {
   title: {
     text: 'ECharts 入门示例',
     left: 'left',
     textAlign: 'center',
     textStyle: {
       align: 'center'
     },
     subtext: "sub",
     rich: {}
   },
   tooltip: {},
   grid: {
     right: '20%'
   },
   legend: {
     data: ['销量']
   },
   xAxis: {
     data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
   },
   yAxis: [{
       type: 'value',
       name: 'temp',
       //min: 'dataMin',
       position: 'right',
       splitLine: {
         show: false
       },
       offset: 60,
       axisLine: {
         lineStyle: {
           color: colors[1]
         }
       },
       axisLabel: {
         formatter: '{value} °C'
       }
     },
     {
       type: 'value',
       name: 'humi',
       //min: 'dataMin',
       splitLine: {
         show: false
       },
       position: 'right',
       axisLine: {
         lineStyle: {
           color: colors[2]
         }
       },
       axisLabel: {
         formatter: '{value} %RH'
       }
     }
   ],
   series: [{
     name: '1',
     type: 'line',
     data: [5, 20, 36, 10, 10, 20],
     yAxisIndex: 0,
     markLine: {
       symbol: ['none', 'arrow'],
       data: [{
         yAxis: 15,
         name: 'raja',
         label: {
           normal: {
             position: 'middle'
           }
         }
       }]
     },
   }, {
     name: '2',
     type: 'line',
     data: [4, 8, 15, 30, 20, 10],
     yAxisIndex: 1,
     markLine: {
       symbol: ['none', 'arrow'],
       data: [{
         yAxis: 15,
         name: 'limit',
         label: {
           normal: {
             position: 'middle'
           }
         }
       }]
     },
   }]
 };

 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);