echarts基本使用

来源：互联网发布：tt软件下载编辑：程序博客网时间：2024/05/18 04:33

项目中要做图形报表，要求使用echarts实现，以前有用过，不过忘得差不多了，现在重新学学。

我的GitHub练习代码

echarts官网提供了源码和说明文档，使用echarts需要先到官网下载需要的js源文件，如果用到主题和地图，也需要到官网进行下载。

可以在使用 webpack 的项目中引入和打包 ECharts

1.npm 安装 ECharts

npm install echarts --save

2.按需引入 ECharts 图表和组件

默认使用 require('echarts') 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。

例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。

// 引入 ECharts 主模块var echarts = require('echarts/lib/echarts');// 引入柱状图require('echarts/lib/chart/bar');// 引入提示框和标题组件require('echarts/lib/component/tooltip');require('echarts/lib/component/title');

3.准备容器、添加数据

// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 绘制图表myChart.setOption({    title: { text: 'ECharts 入门示例' },    tooltip: {},    xAxis: {        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]    },    yAxis: {},    series: [{        name: '销量',        type: 'bar',        data: [5, 20, 36, 10, 10, 20]    }]});

试手练习：

引入中国地图，通过百度地图的Geocoding API（提供从地址到经纬度坐标或者从经纬度坐标到地址的转换服务），实现输入地址，显示地图上对应地址位置和经纬度。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>国内地址查找</title>  <link rel="stylesheet" href="../bootstrap.min.css">  <style>#place-input{width:80%;}form{margin:30px auto;}  </style></head><body><div class="container">  <div class="row">    <div class="col-md-4 col-md-offset-4">      <form class="form-inline">         <input id="place-input" type="text"  class="form-control" value="武汉" placeholder="请输入地址">         <button type="button" id="search-btn" class="btn btn-success">查询</button>      </form></div>  <div>    <div class="row">    <div class="col-md-6 col-md-offset-3">      <div id="main" style="height:500px;"></div>    </div>  </div></div>  <script src='../jquery.min.js'></script><script src='../echarts.min.js'></script><script src='../china.js'></script><script>  // 百度地图的开发者秘钥var token ="hYunmpdXsChCGd42pYmiExGkdZmAhm3N";var url = 'http://api.map.baidu.com/geocoder/v2/?output=json&ak=' + token + '&address=';var ePlaceInput = $('#place-input');var eSearchBtn = $('#search-btn');var myChart = echarts.init(document.getElementById('main'));var chartData = [];eSearchBtn.click(function() {  var place = ePlaceInput.val();  if (place) {    $.getJSON(url + place + '&callback=?', function(res) {      var loc;      if (res.status === 0) {        loc = res.result.location;        chartData.push({          name: place,          value: [loc.lng, loc.lat]        })        drawMap(place);      }else{        alert('百度没有找到地址信息');      }    })  }})function drawMap(name) {  var option = {    backgroundColor: ' #B0B0B0',    title: {      text: '地址查询',      left: 'center',      textStyle: {        color: '#fff'      }    },    tooltip: {      trigger: 'item'    },    toolbox: {        show: true,        feature: {            saveAsImage: {                show: true            }        }    },    geo: {      map: 'china',      label: {        emphasis: {          show: false,        }      },      roam: true,      itemStyle: {        normal: {          areaColor: '#636363',          borderColor: '#222'        },        emphasis: {          areaColor: '#333'        }      }    },    series: [{      name: '地址的经纬度',      type: 'scatter',      coordinateSystem: 'geo',      data: chartData,      symbolSize: function(val) {        return 10;      },    }]  }  myChart.setOption(option)}</script></body></html>

阅读全文

0 0