echarts 图表

 

 echarts 图表 - ECharts.js

 

<script type="text/javascript" src="echarts.min.js"></script>

 

<script type="text/javascript">

function zhexiantu(){
 //指定图标的配置和数据
 var option = {
     title:{
         text:'ECharts 数据统计 折线图'
     },
     tooltip:{},
     legend:{
         data:['用户来源']
     },
     xAxis:{
         data:["Android","IOS","PC","Ohter"]
     },
     yAxis:{
 
     },
     series:[{
         name:'访问量',
         type:'line',
         data:[500,200,360,100]
     }]
 };
 //初始化echarts实例
 var myChart = echarts.init(document.getElementById('chart1'));
 
 //使用制定的配置项和数据显示图表
 myChart.setOption(option);
}

function quxiantu(){
 option = {
   title:{
          text:'曲线图'
      },
      xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
      }]
  };
 var myChart = echarts.init(document.getElementById('chart2'));
 myChart.setOption(option);
}

function zhexiantu2(){
 var option = {
      title: {
          text: '折线图堆叠'
      },
      tooltip: {
          trigger: 'axis'
      },
      legend: {
          data:['邮件营销','联盟广告']
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      toolbox: {
          feature: {
              saveAsImage: {},
              magicType: {//动态类型切换
                        type: ['bar', 'line']
                    },
                    dataView: { //数据视图
                        show: true
                    }
          }
      },
      xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一','周二','周三','周四','周五','周六','周日']
      },
      yAxis: {
          type: 'value'
      },
      series: [
          {
              name:'邮件营销',
              type:'line',
              stack: '总量',
              data:[120, 132, 101, 134, 90, 230, 210]
          },
          {
              name:'联盟广告',
              type:'line',
              stack: '总量',
              data:[220, 182, 191, 234, 290, 330, 310]
          }
      ]
  };
 var myChart = echarts.init(document.getElementById('chart3'));
 myChart.setOption(option);
}

function zhuxingtu(){
 var option = {
      xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
          type: 'value'
      },
      barWidth: 30,
            itemStyle:{
                normal:{
                    color:'#4ad2ff'
                }
            },
      series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
      }]
  };
 var myChart = echarts.init(document.getElementById('chart4'));
 myChart.setOption(option);
}

function yuantu(){
 var data = {
   legendData: ['赵', '钱', '孙', '李'],
   seriesData: [{name: '赵', value: 0.1}, {name: '钱', value: 0.2}, {name: '孙', value: 0.5}, {name: '李', value: 0.3}],
 };

 var option = {
     title : {
         text: '同名数量统计',
         subtext: '纯属虚构',
         x:'center'
     },
     tooltip : {
         trigger: 'item',
         formatter: "{a} <br/>{b} : {c} ({d}%)"
     },
     legend: {
         type: 'scroll',
         orient: 'vertical',
         right: 10,
         top: 20,
         bottom: 20,
         data: data.legendData,

         selected: data.selected
     },
     series : [
         {
             name: '姓名',
             type: 'pie',
             radius : '55%',
             center: ['40%', '50%'],
             data: data.seriesData,
             itemStyle: {
                 emphasis: {
                     shadowBlur: 10,
                     shadowOffsetX: 0,
                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
             }
         }
     ]
 };
 var myChart = echarts.init(document.getElementById('chart6'));
 myChart.setOption(option);
}

window.onload=function(){
 zhexiantu(); //折线图
 
 quxiantu(); //曲线图
 
 zhuxingtu(); //柱形图
 
 zhuxingtu2(); //柱形图堆叠
 
 yuantu(); //圆形图
}
</script>

 

<div id="chart1" style="width:600px; height: 400px;"></div>