ECharts简单的使用

来源：互联网发布：zeppelin源码安装编辑：程序博客网时间：2024/06/04 18:05

ECharts是一个很强大的图表工具，简单的使用必须知道怎么去处理，很多的官方的事例文档也是可以很简单的使用的。
http://echarts.baidu.com/tutorial.html 百度官方的教程

ECharts Echars是模块化的，可以选择的性的引入需要的模块，这个好比使用Seajs之内的模块化工具，这里就需要进行配置处理，也可以不做配置也可以，但是在需要很多模块的时候还是需要进行配置处理的。

// 路径配置require.config({  paths: {    echarts: '当前echarts的安装包的路径,根路径'  }});/*echartsecharts/echarts.jsecharts/chart/barecharts/chart/line......*/// 使用，require规范，选择需要引用的js文件require(  [    'echarts',    'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载  ],  function (ec) {    // 基于准备好的dom，初始化echarts图表    var myChart = ec.init(document.getElementById('main'));     //设置数据，这里就是我们一般情况下需要自己去处理的地方    var option = {    };    // 为echarts对象加载数据     myChart.setOption(option);   });

options参数的设置，就是进行显示的层的处理，最后设置就可以显示处来了

var option = {      //设置x坐标轴      xAxis : [        {          type : 'category',          data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]        }      ],      yAxis : [        {          type : 'value'        }      ],      //设置数据,显示在表格中的数据      series : [        {          "name":"销量",          "type":"bar",//类型          "data":[5, 20, 40, 10, 24, 20,24,32],        }      ]    };

这里写图片描述

option属性的改变就是设置，我们所有的信息的地方！

var option = {      //设置标题      title:{        text:'大标题',        subtext:'小标题'      },      //设置提示      tooltip: {        show: true      },      //设置图例      legend: {        data:['销量']      },      //设置坐标轴      xAxis : [        {          type : 'category',          data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]        }      ],      yAxis : [        {          type : 'value'        }      ],      //设置数据      series : [        {          "name":"销量",          "type":"bar",          "data":[5, 20, 40, 10, 24, 20,24,32],        }      ]    };

http://codepen.io/whqet/pen/OPpXKd?editors=001 可以看看

var option = {      //设置标题      title:{        text:'销量图',        subtext:'纯属捏造，如有雷同，人品爆发。'      },      //设置提示      tooltip: {        show: true      },      //设置图例      legend: {        data:['销量']      },      //设置坐标轴      xAxis : [        {          type : 'category',          data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]        }      ],      yAxis : [        {          type : 'value'        }      ],      //设置数据，各种数据都可以一起使用      series : [        //条形图        {          "name":"销量",          "type":"bar",          "data":[5, 20, 38, 10, 24, 20,24,32]        },        //折线图         {          "name":"销量",          "type":"line",          "data":[5, 20, 38, 10, 24, 20,24,32],           //绘制平均线           markLine : {             data : [               {type : 'average', name: '平均值'}             ]           },          //绘制最高最低点          markPoint : {            data : [              {type : 'max', name: '最大值'},              {type : 'min', name: '最小值'}            ]          }        }      ]    };

总体来说就是，绑定到一个div的位置中，然后进行加载处理数据的信息，最后进行渲染，按需加载！

0 0