建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

基于HTML5的图形库e c h a r t s

来源:易助科技网浏览量:9收藏

简介

echarts.js是一款基于HTML5的图形库,图形的创建也比较简单,直接引用Javascript即可。

插件特定:

1)这个库是百度的项目,而且一直有更新,目前最新的是EChart3;

2)这个库的项目文档比较详细,每个点都说明的比较清楚,而且是中文的,理解比较容易;

3)这个库支持的图形很丰富,并且可以直接切换图形,使用起来很方便。


基于HTML5的图形库echart.js-示例图1
基于HTML5的图形库echart.js-示例图2



使用

1.  引入文件


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


2.  HTML


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


3.  调用


<script type="text/javascript">
  //指定图标的配置和数据
  var option = {
    title:{text:'折线图'},
    tooltip:{},
    legend:{data:['访客来源']},
    xAxis:{data:["智联招聘","51job","拉钩","Boss直聘"]},
    yAxis:{},
    series:[{
      name:'访问量',
      type:'line',
      areaStyle: {normal: {} },
      data:[600,310,200,800]
    }]
  };
  
  //初始化echarts实例
  var myChart = echarts.init(document.getElementById('chart1'));
  
  //使用制定的配置项和数据显示图表
  myChart.setOption(option);</script><script>
  
  //基于准备好的dom,初始化echarts实例
  var myChart = echarts.init(document.getElementById('chartMethodOne'));
  myChart.setOption({
    title: {text: '月度票量折线图(点击钻取加载,当年1-12月)'},
    tooltip: {}, 
    //legend: {
    //data:['']
    //},
    xAxis: {
      data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]},
      yAxis: {},
      series: [{
        name: '票量',
        type: 'line',
        data:[40,20,35,60,55,10,123490,12345,234,1234,12345,2344]
      }]
    });
</script>

<script type="text/javascript">
  // 基于准备好的dom,初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  
  // 指定图表的配置项和数据	
  var option = {
    title: {text: '销量柱状图'},
    tooltip: {},
    legend: {data:['销量']},
    xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };
  
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>

<script type="text/javascript">
  // 基于准备好的dom,初始化echarts实例
  var myChart = echarts.init(document.getElementById('pie'));
  myChart.setOption({
    series : [{
      name: '访问来源',
      type: 'pie',
      // 设置图表类型为饼图
      radius: '55%',
      // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。
      data:[
        // 数据数组,name 为数据项名称,value 为数据项值
        {value:235, name:'视频广告'},
        {value:274, name:'联盟广告'},
        {value:310, name:'邮件营销'},
        {value:335, name:'直接访问'},
        {value:400, name:'搜索引擎'}
      ]
    }]
  });
</script>



相关链接

官网地址:https://echartsjs.com/

GitHub 地址 :https://github.com/luohong123/echartJs