ECharts统计图使用

官网Demo地址: https://www.echartsjs.com/examples/
以柱状图为例
js下载地址：https://www.echartsjs.com/download.html
可自由选择下载不同版本、不同主题、所需地图数据，根据需求进行个性化定制

项目中引入js：

<script type="text/javascript" src="../js/echarts2.0.0/echarts.js"></script>

创建echarts容器：

<div id="charts"  style="float: left; width: 40%;height: 190px;"></div>

点击进入代码和示例页面：

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 shadowtype: '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)]});
});

Ajax请求数据，获取数组格式：

//X轴数据var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];//y轴数据
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];

将echarts放入容器：

var myChart = echarts.init(document.getElementById('charts'));option = {......}myChart.setOption(option);

注：option 可替换成其他形式的统计图

Echarts统计图API：https://www.echartsjs.com/api.html#echarts
option参数配置：https://www.echartsjs.com/option.html#title
可以个性化修改样式

ECharts统计图使用相关推荐

润乾报表echarts统计图省份地图设置
需求是制作单个省份的地图,比如,要制作一张江西省的产业分布图,通过echarts设置,首先要有江西省地图的js或者是json,在润乾设计器中有自带的模板可以直接使用,report5\web\we ...
微信小程序中使用Echarts统计图
效果图注意:ec-canvas 一定要在 wxss 文件里设置宽和高,否则统计图区域会变为空白下载 github:https://github.com/ecomfe/echarts ...
echarts 统计图如何实现打印导出
为方便用户能够更好的在报表中使用 Echarts 图形,润乾报表v2018 提供了对 Echarts 图形的导出与打印.但导出与打印依赖于 slimerjs 和 firefox,因此使用导出与打印前需 ...
echarts 统计图周月切换_如何设置ECharts星期轴的样式
calendar.dayLabel | Object 设置 ECharts 日历坐标系中星期标签的样式. calendar.dayLabel.show | boolean [ default: tru ...
echarts 统计图周月切换_用echarts做报表按统计时间数据记录
自己也来整理一下,好记好消化↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑ 按日查询: createtime:数据表里面的时间字段 t_voipchannelrecord :表名 SELECT ...
echarts 自适应高度_web 报表工具如何自适应
现在的报表用户已经不再将报表作为一个单纯的报表工具看待了,有时候也会当作页面工具来使用,这时为了页面显示工整美观,就需要报表能够自适应宽度.下面我们就基于润乾报表来讲一下是如何做到自适应展现报表. 产 ...
在 echarts关系图动态线上添加文字_多折线堆叠图如何制作？
润乾报表有丰富的图形展现效果,不仅自带了多种统计图形,还内置了第三方统计图形 D3 还有 echarts 统计图.最近好多客户提出想要实现多折线堆叠的统计图,我用自带的图形和 echarts 两种方式 ...
Vue中使用echart实现中国地图统计图
Vue中使用echart实现中国地图统计图前言 Echart版本的确定全局导入或按需导入在对应的页面调用echart 前后端数据交互注意事项前言在Vue2.x开发中,为了更好地展示某一个时间 ...
在Arcgis地图上绘制Echarts热力图(Heatmap)
在Arcgis地图上绘制Echarts热力图(Heatmap) 2018-08-30 10:18 [原创]本文地址:https://www.cnblogs.com/qiaoge0923/p/95623 ...

ECharts统计图使用

ECharts统计图使用相关推荐

最新文章

热门文章