3被浏览7,915分享邀请回答var colorList = [];
option = {
calculable : true,
tooltip : {
trigger: 'axis'
type : 'category',
data : ['s1','s2','s3','s4','s5']
type : 'category',
axisLine: {show:false},
axisTick: {show:false},
axisLabel: {show:false},
splitArea: {show:false},
splitLine: {show:false},
data : ['s1','s2','s3','s4','s5']
type : 'value',
axisLabel:{formatter:'{value} 分'}
series : [
name:'成绩',
type:'bar',
itemStyle: {
color: function(params) {
return colorList[params.dataIndex]
data:[70,80,50,90,100]
name:'成绩',
type:'bar',
xAxisIndex:1,
//颜色需要有透明度
itemStyle: {normal: {color:'rgba(102, 102, 102,0.5)'}},
//data填你需要的背景的值
data:[100,100,100,100,100]
for(var i in option.series[0].data){
colorList[i]=option.series[0].data[i]&70 ? '#F08080' : '#7EC0EE';
其实不是背景。。。102 条评论分享收藏感谢收起12 条评论分享收藏感谢收起写回答ECharts绘制的图形保存为图片 - 简书
ECharts绘制的图形保存为图片
最近的项目需要导出文件，导出的文件里有数据分析图，如折线图，柱状图，散点图等。综合考虑之后，我选择了目前已经很成熟的也很流行的ECharts库。ECharts一个纯 Javascript 的图表库，它提供了绘制各种图形的方法方法，几乎囊括了所有的二维图形，用起来也很是方便。还提供了图片下载的功能。这里我们主要说的是图片下载。下面是我找到的一些方法总结以及它们的适用情况。1.用ECharts配置项手册中的toolbox.feature.saveAsImage因为是自带的，不需要怎么处理，直接用就好。示例：
toolbox: {
　　show: true,
　　feature: {
　　　　saveAsImage: {
　　　　show:true,
　　　　excludeComponents :['toolbox'],
　　　　pixelRatio: 2
这一段一定要写在option中，这样会在图形右上角产生一个保存为图片的标识，点击即可下载图片，这种方法试用于网站点击保存的需求，效果如下图：
saveAsImage测试效果图
2.用ECharts实例方法getImage需要注意的是，这个功能在ECharts3中好像已经舍弃，作者用ECharts3没有出现任何效果，换成ECharts2的js文件才可以运行。示例：
myChart.setOption(option);
var picInfo = myChart.getImage();
getImage要放在setOption方法生成一个简单的图形之后，我们怎么验证getImage是否生效了呢？方法a：万能的alert调试，这里 alert (picInfo); 的结果弹出的是[object HTMLImageElement]，我们仍然不知道这里的对象是什么。方法b：页面中新定义一个容器，将得到的picInfo写入div，看看是什么结果：
var picInfo = myChart.getImage();
onload=function f(){
　　document.getElementById("pic").appendChild(picInfo);
　　//document.getElementById("pic").innerHTML = picI
注意，这里的写入div，要用上面的方法写入上面定义的div。得到如下图所示：
getImage得到的对象写入div
如果用下面的方法写入，会在定义的div中出现[object HTMLImageElement]，如下图：
getImage得到的对象普通写入
遗憾的是，这种方法得到的picInfo为[object HTMLImageElement]，无法通过Ajax传递到后台处理，只能用于显示。因此，这种方法适用于一些网站绘制图形上下或者左右同步显示的需求。3.用ECharts实例方法getDataURL很显然，上面的两种情况并不能满足我现在图片自动保存的需求，下面说我最后解决方案。首先，我们用getDataURL得到图片信息：
myChart.setOption(option);
var picInfo = myChart.getDataURL();
getDataURL仍然要放在setOption方法生成一个简单的图形之后，现在我们得到的picInfo是一串base64信息，我们设法将得到的picInfo用Ajax传递到后台处理，作者用的是php，因此，以php处理为例：新建一个文件，取名test.php，（请把此文件放在可运行的环境里，这是基础）。在php文件中将绘制图形的html文件include进来，接收html中Ajax传递到后台的信息，将base64转化为图片保存。先判断picInfo是否存在，存在则传递到后台，代码如下：
if(picInfo){
　　$.ajax({
　　　　type: "post",
　　　　data: {
　　　　　　baseimg: picInfo
　　　　},
　　　　url: 'test.php?action=save',
　　　　async: true,
　　　　success: function(data) {
　　　　　　console.log(picInfo);
　　　　},
　　　　error: function(err){
　　　　　　console.log('图片保存失败');
　　　　　　alert('图片保存失败');
test.php接收数据并处理：
include("test.html");
if($action = "save"){
　　$picInfo = $_POST['baseimg'];
　　$streamFileRand = date('YmdHis').rand(); //图片名
　　$picType ='.png';//图片后缀
　　$streamFilename = "/www/echarts/".$streamFileRand .$picT //图片保存地址
　　preg_match('/(?&=base64,)[\S|\s]+/',$picInfo,$picInfoW);//处理base64文本
　　file_put_contents($streamFilename,base64_decode($picInfoW[0]));//文件写入
OK，成功保存图片到自己想要的位置。还有一点，如果你在测试的时候用了getDataURL方法，看到一个空的坐标轴，那么可能是动画效果产生的后果，animation决定是否开启动画，关闭即可，在option中加入：animation : false,好啦，得到的图形可以正确显示啦。祝大家好运，不要遇到各种棘手的问题。
精分，双子女一枚，伪文艺，程序员，喜欢吃，喜欢睡，喜爱一切美好的小事物。不爱逛街。
百战程序员_ Java1573题 QQ群：034603 掌握80%年薪20万掌握50%年薪10万 全程项目穿插, 从易到难，含17个项目视频和资料持续更新，请关注www.itbaizhan.com 国内最牛七星级团队马士兵、高淇等11位十年开发经验专...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
Java 基础思维导图，让 Java 不再难懂 - 工具资源 - 掘金思维导图的好处 最近看了一些文章的思维导图，发现思维导图真是个强大的工具。了解了思维导图的作用之后，觉得把它运用到java上应该是个不错的想法，这样回顾知识点的时候一目了然，快速知道自己的短板。 思维导图...
Ubuntu的发音 Ubuntu，源于非洲祖鲁人和科萨人的语言，发作 oo-boon-too 的音。了解发音是有意义的，您不是第一个为此困惑的人，当然，也不会是最后一个：） 大多数的美国人读 ubuntu 时，将 u 作为元音发音，类似单词 who 或者 boo ，重音在第...
周振璘11月份第16次读书打卡，我读的书是《考场满分作文全集》，今天读了第250页到第 270 页，我最喜欢的文章是《在春光里奔跑》我的感受是：我们应该永不言败，做任何事都要怀着一颗前进的心去完成它，努力完善它。我最喜欢的一句话是：在这个万物复苏的春天，那次穿云朵的太阳如同...
的时候出现了问题,提示信息上说pip文件夹没有访问权限, 那好办, 加上sudo呗sudo python get-pip.py还是提示没有权限, 于是打开Finder找到对应的目录, 发现这个文件夹根本就不存在, 于是自己创建一个文件夹名字叫pip(可以直接创建, 也可以使...
相遇总是这样
争吵总是这样
我亲爱的陌生人 真的谈心远比谈天困难
就当我们说好 撤掉心里的设防
在回家的路上
今天是学院第二期学员的结业雅集，这免不了提及离别，而对于离别我总有些无奈，却不想过于伤悲，悲何呢，人在情就在，又不是生离死别。何必过于伤悲。但当珊珊说到让我们师父师母去福建，我鼻子竟有点酸酸的，怎么个割舍不断。有些情不是不见便就会散，不是吗？突然感觉人真的是个很奇怪的动...使用Echarts绘制基本图表_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
使用Echarts绘制基本图表
&&使用Echarts绘制柱状图,饼图,折线图以及仪表图
阅读已结束，下载本文需要
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，同时保存到云知识，更方便管理
加入VIP
还剩21页未读，
定制HR最喜欢的简历
你可能喜欢博客分类：
//环形进度图
TgsChartsUtil.drawCircleLoadingChart = function(cfg){
var myChart = TgsChartsUtil.getChart(cfg);
if(!TgsChartsUtil.isPageLoad()){
cfg.chartType = "circleLoading";
TgsChartsUtil.configs.push(cfg);
TgsChartsUtil.showLoading(myChart, null, 12, TgsChartsUtil.loaddingEffects[3],8);
var colorStyleProps = TgsChartsUtil.props['circleLoading']['colorStyle'];
var colorStyle =
if(cfg.colorStyleByTradeStatus != undefined){
colorStyle = colorStyleProps[(cfg.colorStyleByTradeStatus=='invest'?'orange':((cfg.colorStyleByTradeStatus=='oping') ? 'blue' : 'gray'))];
}else if(cfg.colorStyle){
colorStyle = colorStyleProps[cfg.colorStyle];
if(!colorStyle){
colorStyle = colorStyleProps['blue'];
if(!cfg.width){
cfg.width = 160;
var otherStyle = {
normal : {
color : colorStyle['otherColor'],
show : false
//position : 'center',
//formatter : '{b}',
//textStyle: {
baseline : 'bottom'
labelLine : {
show : false
var valueStyle = {
normal : {
color: colorStyle['valueColor'],
show : true,
position : 'center',
textStyle: {
color : colorStyle['valueColor'],
fontSize : cfg.fontSize || 10
labelLine : {
show : false
emphasis: {
color: colorStyle['valueColor']
var divisor = cfg. //除数
var dividend = cfg.//被除数
if(divisor != undefined && dividend != undefined && divisor != 0){
cfg.data = parseFloat(dividend || 0) / parseFloat(divisor) * 100;
} else if(cfg.data == undefined || cfg.data == null){
cfg.data = 0;
var dv = cfg.data & 100 ? 100 : cfg.
var option = {
//title : {
text: 'The App World',
subtext: 'from global web index',
x: 'center'
toolbox: {
show : false
series : [
type : 'pie',
center : ['50%', '50%'],
radius : [cfg.width/2.7, cfg.width/2.16],
itemGap: 10,
x: 'center',
y: 'center',
{name:Math.floor(cfg.data)+'%', value : dv, itemStyle : valueStyle},
{name:'', value : (100 - dv),itemStyle : otherStyle}
myChart.hideLoading();
myChart.setOption(option);
简单调用：
TgsChartsUtil.drawCircleLoadingChart({
domId : "loadChart_$!prj.projectId",
colorStyleByTradeStatus : '$!{prj.prjectStatus}',
dividend : '$!{prj.amount}',
divisor:'$!{prj.minAmount}'
抱歉 难得改代码哈
应用网站,也可以到网站查看具体应用效果：
浏览 17635
浏览: 220681 次
来自: 重庆
大神，这个支持ajax获取数据来分页吗?
太好了~感谢作者~~!!
click 模式下面 不能重新初始化吗？
请问同一个页面可以支持多个分页么？
有没有完整的代码做参考啊 那个网站必须注册，而且注册还需要邀请 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'需引入echarts.js插件，开发环境建议选择源代码版本，该版本包含了常见的警告和错误提示。下载地址&http://echarts.baidu.com/download.html
下面是代码，注释很清楚，主要是js代码，可根据项目进行增删！配置项说明：&http://echarts.baidu.com/option.html#title
&!DOCTYPE html&
&meta charset="utf-8"&
&title&5分钟上手ECharts&/title&
&!-- 引入ECharts文件 --&
&script type="text/javascript" src="./echarts.js"&&/script&
&!-- 为ECharts准备一个具备大小（宽高）的DOM --&
&div id="main" style="width: 1200 height: 600"&&/div&
&!-- js代码 --&
&script type="text/javascript"&
/*基于准备好的dom，初始化echarts实例*/
var myChart = echarts.init(document.getElementById('main'));
// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
var data0 = splitData([
['', 0.26,2.94],
['', ,8.38],
['', 6.5,6.92],
['', 8.98,3.8],
['', 2.48,3.76],
['', 5.42,1.82],
['', 9.02,1.15],
['', 8.15,0.38],
['', ,7.42],
['', 4.48,1.73],
['', 8.53,3.89],
['', 2.4,3.03],
['', 1.56,4.8],
['', 2.91,7.07],
['', 7.18,7.94],
['', 5.95,8.82],
['', 4.16,0.88],
['', 5.82,8.78],
['', 3.34,0.71],
['', 3.22,4.63],
['', 5.59,6.16],
['', 9.51,9.65],
['', 3.4,3.54],
['', 6.31,8.14],
['', 7.18,1.44],
['', 4.29,2.02],
['', 8.61,3.67],
['', 0.59,0.96],
['', 6.6,3.29],
['', 3.97,6.33],
['', 0.28,6.22],
['', 8.4,],
['', 0.02,6.05],
['', 7.43,1.31],
['', 7.37,7.86],
['', 4.24,0.81],
['', 8.28,2],
['', 6.72,4.89],
['', 7.67,9.99],
['', 1.26,],
['', 6.3,3.55],
['', 6.62,6.87],
['', 4.4,3.95],
['', 7.74,3.42],
['', 5.29,1.34],
['', 1.59,2.59],
['', 5.77,4.73],
['', 6.13,3.04],
['', 9.55,2.48],
['', 6.78,6.26],
['', 1.94,4.99],
['', 4.85,6.43],
['', 3.8,7.51],
['', 7.6,6.03],
['', 4.64,0.11],
['', 2.17,5.12],
['', 4.54,2.62],
['', 8.32,6.12],
['', 9.31,4.63],
['', 7.91,0.58],
['', 4.12,9.65],
['', 5.5,2.81],
['', 1.17,6.07],
['', 5.57,0.26],
['', 6.3,5.21],
['', 2.97,7.86],
['', 6.83,7.67],
['', 1.92,0.85],
['', 7.01,9.93],
['', 4.8,5.19],
['', 1.81,2.87],
['', 2.87,8.09],
['', 9.99,9.39],
['', 5.11,5.3],
['', 2.4,4.18],
['', 5.67,4.95],
['', 8.53,2.59],
['', 3.08,1.7],
['', 1.32,2.1],
['', 4.02,4.33],
['', 7.75,5.72],
['', 0.59,5.53],
['', 9.25,3.43],
['', 2.42,7.1],
['', 0.93,6.86],
['', 2.11,6.69],
['', 0.9,0.63],
['', 8.35,0.1]
//切割数组，把数组中的日期和数据分离，返回数组中的日期和数据
function splitData(rawData) {
var categoryData = [];
var values = [];
for (var i = 0; i & rawData. i++) {
//splice 返回每组数组中被删除的第一项，即返回数组中被删除的日期
//alert(rawData[i].splice(0, 1)[0]);
//categoryData
把返回的日期放到categoryData[]数组中
categoryData.push(rawData[i].splice(0, 1)[0]);
//alert(categoryData);
//数据数组，即数组中除日期外的数据
// alert(rawData[i]);
values.push(rawData[i])
categoryData: categoryData, //数组中的日期 x轴对应的日期
values: values
//数组中的数据 y轴对应的数据
//计算MA平均线，N日移动平均线=N日收盘价之和/N
dayCount要计算的天数(5,10,20,30)
function calculateMA(dayCount) {
var result = [];
for (var i = 0, len = data0.values. i & i++) {
if (i & dayCount) {
result.push('-');
//alert(result);
//结束单次循环，即不输出本次结果
var sum = 0;
for (var j = 0; j & dayC j++) {
//收盘价总和
sum += data0.values[i - j][1];
//alert(sum);
result.push(sum / dayCount);
// alert(result);
option = {
text: '上证指数',
tooltip: {
trigger: 'axis',
//触发类型：坐标轴触发
axisPointer: {
//坐标轴指示器配置项
type: 'cross'
//指示器类型，十字准星
//图例控件，点击图例控制哪些系列不现实
data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
//直角坐标系
show:true,
left: '10%',
//grid组件离容器左侧的距离
right: '10%',
bottom: '15%',
//backgroundColor:'#ccc'
type: 'category',
//坐标轴类型，类目轴
data: data0.categoryData,
//scale: true,
//只在数字轴中有效
boundaryGap : false,
//刻度作为分割线，标签和数据点会在两个刻度上
axisLine: {onZero: false},
splitLine: {show: false},
//是否显示坐标轴轴线
//splitNumber: 20,
//坐标轴的分割段数，预估值，在类目轴中无效
min: 'dataMin', //特殊值，数轴上的最小值作为最小刻度
max: 'dataMax'
//特殊值，数轴上的最大值作为最大刻度
scale: true,
//坐标刻度不强制包含零刻度
splitArea: {
show: true
//显示分割区域
dataZoom: [
//用于区域缩放
filterMode:'filter',
//当前数据窗口外的数据被过滤掉来达到数据窗口缩放的效果
默认值filter
type: 'inside', //内置型数据区域缩放组件
start: 50,
//数据窗口范围的起始百分比
//数据窗口范围的结束百分比
show: true,
type: 'slider', //滑动条型数据区域缩放组件
start: 50,
//图表类型
name: '日K',
type: 'candlestick',
data: data0.values,
//y轴对应的数据
////////////////////////图标标注/////////////////////////////
markPoint: {
//图表标注
//标注的文本
//默认不显示标注
show:true,
//position:['20%','30%'],
formatter: function (param) {
//标签内容控制器
return param != null ? Math.round(param.value) : '';
//标注的数据数组
name: 'XX标点',
coord: ['', 2300], //指定数据的坐标位置
value: 2300,
itemStyle: {
//图形样式
normal: {color: 'rgb(41,60,85)'}
name: 'highest value',
type: 'max',
valueDim: 'highest'
//在highest维度上的最大值 最高价
name: 'lowest value',
type: 'min',
valueDim: 'lowest'
name: 'average value on close',
type: 'average',
valueDim: 'close'
tooltip: {
formatter: function (param) {
return param.name + '&br&' + (param.data.coord || '');
/////////////////////////////////图标标线///////////////////////////
markLine: {
symbol: ['none', 'none'],
//标线两端的标记类型
name: 'from lowest to highest',
type: 'min',
//设置该标线为最小值的线
valueDim: 'lowest', //指定在哪个维度上的最小值
symbol: 'circle',
symbolSize: 10, //起点标记的大小
//normal默认，emphasis高亮
normal: {show: false},
//不显示标签
emphasis: {show: false} //不显示标签
type: 'max',
valueDim: 'highest',
symbol: 'circle',
symbolSize: 10,
normal: {show: false},
emphasis: {show: false}
name: 'min line on close',
type: 'min',
valueDim: 'close'
name: 'max line on close',
type: 'max',
valueDim: 'close'
//MA5 5天内的收盘价之和/5
name: 'MA5',
type: 'line',
data: calculateMA(5),
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
name: 'MA10',
type: 'line',
data: calculateMA(10),
smooth: true,
lineStyle: {
//标线的样式
normal: {opacity: 0.5}
name: 'MA20',
type: 'line',
data: calculateMA(20),
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
name: 'MA30',
type: 'line',
data: calculateMA(30),
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
运行结果：
阅读(...) 评论()