ECharts 的基本使用

ECharts 的官网：http://echarts.baidu.com/

点击实例下面的官方实例就可以看到官方给出的各种实例：

使用ECharts首先先要下载 ECharts 的js 也就是 echarts.js，这里下载你需要的版本就可以了

然后在你的jsp页面引入 echarts.js，我用的js是echarts.min.js 直接用下载之后就可以

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

在给一个显示的标签,我这里给定了宽度和高度

<div id="wangmx" style="width: 800px;height:400px;"></div>

实例化ECharts

var myChart = echarts.init(document.getElementById('wangmx'));

点开你想要用的js实例，复制右边的全部代码，粘贴到你的jsp页面

使用刚才指定的配置项和数据

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

之后启动项目访问jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script type="text/javascript" src="<%=path%>/js/jquery.min.js"></script>
     <script type="text/javascript" src="<%=path%>/js/echarts.min.js"></script>
	 <script type="text/javascript" src="<%=path%>/js/echarts.style.js" ></script>
	 
	 <script type="text/javascript">
	 $(function(){
		var myChart = echarts.init(document.getElementById('main'));
		
	 	var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
		var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
		var yMax = 500;
		var dataShadow = [];
		
		for (var i = 0; i < data.length; i++) {
		    dataShadow.push(yMax);
		}
		
		option = {
		    title: {
		        /* text: '特性示例：渐变色 阴影 点击缩放', */
		        /* subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom' */
		    },
		    xAxis: {
		        data: dataAxis,
		        axisLabel: {
		            inside: true,
		            textStyle: {
		                color: '#fff'
		            }
		        },
		        axisTick: {
		            show: false
		        },
		        axisLine: {
		            show: false
		        },
		        z: 10
		    },
		    yAxis: {
		        axisLine: {
		            show: false
		        },
		        axisTick: {
		            show: false
		        },
		        axisLabel: {
		            textStyle: {
		                color: '#999'
		            }
		        }
		    },
		    dataZoom: [
		        {
		            type: 'inside'
		        }
		    ],
		    series: [
		        { // For shadow
		            type: 'bar',
		            itemStyle: {
		                normal: {color: 'rgba(0,0,0,0.05)'}
		            },
		            barGap:'-100%',
		            barCategoryGap:'40%',
		            data: dataShadow,
		            animation: false
		        },
		        {
		            type: 'bar',
		            itemStyle: {
		                normal: {
		                    color: new echarts.graphic.LinearGradient(
		                        0, 0, 0, 1,
		                        [
		                            {offset: 0, color: '#83bff6'},
		                            {offset: 0.5, color: '#188df0'},
		                            {offset: 1, color: '#188df0'}
		                        ]
		                    )
		                },
		                emphasis: {
		                    color: new echarts.graphic.LinearGradient(
		                        0, 0, 0, 1,
		                        [
		                            {offset: 0, color: '#2378f7'},
		                            {offset: 0.7, color: '#2378f7'},
		                            {offset: 1, color: '#83bff6'}
		                        ]
		                    )
		                }
		            },
		            data: data
		        }
		    ]
		};
		
		// Enable data zoom when user click bar.
		var zoomSize = 6;
		myChart.on('click', function (params) {
		    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
		    myChart.dispatchAction({
		        type: 'dataZoom',
		        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
		        endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
		    });
		});
		
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	 
	 })
	 </script>
	 
  </head>
  
  <body>
    <div id="main" style="width: 800px;height:400px;"></div>
  </body>
</html>

js下载地址

github:https://github.com/2224132867/ECharts-js

ECharts 的基本使用

猜你喜欢