echarts集成 实例-包含柱状图、悬浮提示、文本提示
2016-11-25 15:13
393 查看
echarts的集成实例其实很多的,官方网站也有,在这里呢我就备注一下,记一下。
下面简单集成一个柱状图,主要分为三步曲:
1 .首先引入js
2.html 定义一个块,用于放图形
3.在js里面为图形添加内容
下面简单集成一个柱状图,主要分为三步曲:
1 .首先引入js
<script type="text/javascript" src="<c:url value="/lib/echarts/echarts-all.js"/>"></script> <script type="text/javascript" src="<c:url value="/lib/echarts/config.js"/>"></script>
2.html 定义一个块,用于放图形
<div id="echarts" style="height:580px;width:100%"></div>
3.在js里面为图形添加内容
var myChart = echarts.init(document.getElementById("echarts")); option = { title : { text: 'XXXX' }, tooltip : {//鼠标悬浮弹窗提示 /* trigger: 'axis' */ trigger : 'item', show:true, showDelay: 0, hideDelay: 0, transitionDuration:0, backgroundColor : 'rgba(255,0,255,0.7)', borderColor : '#f50', borderRadius : 8, borderWidth: 2, padding: 10, // [5, 10, 15, 20] formatter: function (params,ticket,callback) { // console.log(params); var res = params[1]+ '<br/>'+"XX人数"+' : ' + params[2]; return res; } }, calculable : false, xAxis : [ { type : 'value', boundaryGap : [0, 0.01] } ], yAxis : [ { type : 'category', data : nameList/* ['巴西','印尼','美国','印度','中国','世界人口(万)'] */ } ], series : [ { name:'XX人数', type:'bar', data:countList,/* [23, 1, 13, 15, 34, 68] */ itemStyle : { normal : { color : (function() { var zrColor = zrender.tool.color; return zrColor.getLinearGradient(0, 80, 0, 500, [ [ 0, 'purple' ], [ 0.5, 'orangered' ], [ 1, 'orange' ] ]) })(), label : { show : true, position : 'right' /* , formatter: function (params,ticket,callback) { console.log(params); var res = params.data+"人"; return res; } */ } }, emphasis : { label : { show : true, textStyle : { color : 'orange', fontWeight : 'bold' } } } } } ] }; myChart.setOption(option);
相关文章推荐
- Highlight出包含特定文本的单元格-search函数与条件格式的应用实例
- ECharts系列 - 柱状图(条形图)实例一
- Echarts图标使用实例(柱状图与饼图)
- echarts 柱状图实例
- 【2】node.js-eCharts柱状图-加载本地json文本数据
- Android文本自动提示框的简单应用实例
- echarts 鼠标悬浮提示
- ECharts系列 - 柱状图(条形图)实例一
- ECharts系列 - 柱状图(条形图)实例一
- BIEE 11g 集成echarts 3.1.4 实例
- jquery悬浮提示框完整实例
- ECharts柱状图实例
- Echarts3.0+Ajax请求数据柱状图实例
- android文本自动提示 AutoCompleteTextView的实例2则
- jquery悬浮提示框完整实例
- 鼠标悬浮在元素上显示提示文本
- ECharts柱状图中自定义提示框内容
- PHP+ECharts系列 - 柱状图(条形图)实例一
- echarts 图表制作(饼图、柱状图(包含关系)、时间轴)
- ECharts系列 - 柱状图(条形图)实例