原文:https://www.xncoding.com/2016/06/22/web/echarts.html
ECharts是一款由百度前端技术部开发的,基于JAVAscript的数据可视化图表库,提供直观,生动, 可交互,可个性化定制的数据可视化图表。
提供大量常用的数据可视化图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示, 工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、 力导向布局图以及和弦图,同时支持任意维度的堆积和多图表混合展现。
二维折线图是最常见的用法,这里我画的是最基础的二维折线图。
首先引入最新js依赖echarts.min.js
<script type="text/JavaScript" src="../../js/jquery-1.12.4.min.js"></script> <script src="./echarts.min.js"></script>
第二步,页面定义图表div,里面放的隐藏input是首页加载时候从后台传入的_隔开数据:
<!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main1" style="width: 800px;height:400px;"></div> <hr/>
注意看js怎么写:
$(function () { // 开始初始化echart数据 x_data = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]; y_data = [[5, 20, 36, 10, 10, 20], [6, 22, 13, 33, 12, 15]]; // 基于准备好的dom,初始化echarts实例 var myChart1 = echarts.init(document.getElementById('main1')); var option1 = { title: { text: '服装销量表' }, tooltip: { trigger: 'axis' }, legend: { data: ['第一季度', '第二季度'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: {}, xAxis: { type: 'category', boundaryGap: false, data: x_data }, yAxis: { type: 'value' }, series: [ { name: '第一季度', type: 'line', stack: '总量', data: y_data[0] }, { name: '第二季度', type: 'line', stack: '总量', data: y_data[1] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart1.setOption(option1); });
我放了两项纪录,分别是第一季度和第二季度销量,下面是效果图: