echarts画折线图和数据excel导出

最近一直使用echarts画折线图，在此做个记录
最后样式

代码

<!DOCTYPE html>
<html style="height: 100%"><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" ></script><!-- 引入 jquery 和echarts --></head><body><div id="container" style="height: 800px;width:1200px;margin-left:300px"></div><!-- 用来画折线图的div --><script type="text/javascript">
var YY= [1,2,3,4,5];//y轴的数据
var XX= ['坐标1','坐标2','坐标3','坐标4','坐标5'];//x轴的数据
function fetchData(){
//异步加载数据，此处可以进行ajax请求，然后返回数据setTimeout(function(){myChart.hideLoading();//关闭动画//赋值myChart.setOption({xAxis: {data: XX},series: [{data: YY,}]});}, 2000);
}// 初始 option
var myChart = echarts.init(document.getElementById("container"));
option = null;
option = {title: {//标题text: '折线图',// 主标题subtext: '练习',// 副标题//标题位置x: 'center',y:'10',// 主标题文字设置textStyle: {fontSize: 30,                   // 文字大小fontWeight: 900,             // 文字加粗color: 'rgb(13, 14, 78)'         // 文字颜色},// 副标题文字颜色subtextStyle: {color: '#aaa'          // 文字颜色}},color : ['rgba(51, 102, 255,0.8)'],//折线颜色//工具栏toolbox: {show: true,itemSize: 20,   x: 'center',y:70,feature: {//自定义工具栏，myTool1: {show: true,title: 'Excel导出',//自处可以放图片icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',onclick: function (){//列标题，逗号隔开，每一个逗号就是隔开一个单元格var str = 'x轴,y轴\n';//增加\t为了不让表格显示科学计数法或者其他格式for(var i = 0 ; i < XX.length; i++ ){str+=XX[i] + '\t,'+YY[i];   str+='\n';  }//encodeURIComponent解决中文乱码var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);//通过创建a标签实现var link = document.createElement("a");link.href = uri;//对下载的文件命名link.download =  "json数据表.csv";document.body.appendChild(link);link.click();document.body.removeChild(link);}},lineChart :{},// '折线图切换',barChart :{},// '柱形图切换',saveAsImage: {} ,//保存为图片,//自定义数据视图dataView: {show: true,readOnly: true,title: '数据视图',optionToContent: function (opt) {var axisData = opt.xAxis[0].data;var series = opt.series;var tdHeads = '<td   style="width:400px;">x坐标轴</td>';series.forEach(function (item) {tdHeads += '<td  style="width:400px;">y坐标轴</td>';});// var table = '<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center"><tbody><tr>'+tdHeads+'</tr>';var table = '<table border="1"  align="center"  style="width:800px;color:black"><tbody><tr>'+tdHeads+'</tr>';var tdBodys = '';for (var i = 0, l = axisData.length; i < l; i++) {for (var j = 0; j < series.length; j++) {if(typeof(series[j].data[i]) == 'object'){tdBodys += '<td  style="width:400px;">'+series[j].data[i].value+'</td>';}else{tdBodys += '<td  style="width:400px;">'+ series[j].data[i]+'</td>';}}table += '<tr><td >'+axisData[i]+'</td>'+ tdBodys +'</tr>';tdBodys = '';}table += '</tbody></table>';return table;}},magicType: {type: ['line', 'bar']}}},//x轴设置xAxis:  {name:'x坐标轴',type: 'category',nameTextStyle:{fontSize: 30,//坐标轴名字字体大小},data:[],axisLabel: {interval: 0,//0表示让所有坐标值全部显示，数字表示间隔rotate:0,//让坐标值旋转一定的角度，当x轴数据文字过长，可让数据倾斜显示textStyle: {color: 'red',  //更改坐标轴文字颜色fontSize : '30',      //更改坐标轴文字大小}},},yAxis: {name:'y坐标轴',show: true,type: 'value',nameTextStyle:{fontSize: 30,//坐标轴名字字体大小}, //隐藏刻度线axisLine: {show: false,},//隐藏轴线axisTick: {show: false, },axisLabel: {textStyle: {color: 'red',  //更改坐标轴文字颜色fontSize : '30',      //更改坐标轴文字大小}},},//生成的折线图的位置grid: {top: '150',left:'30',right:'130',containLabel: true//为ture才会生效以上的设置},// 标注  即 最大值，最小值的样式设置markPoint : {// color: 'rgb(30, 144, 255)',symbol: 'pin',         // 标注类型symbolSize: 123,            // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2},//提示样式设置   即鼠标在折线图上移动时的提示tooltip: {trigger: 'axis',           // 触发类型，坐标轴触发showDelay: 20,             // 显示延迟，添加显示延迟可以避免频繁切换，单位mshideDelay: 200,            // 隐藏延迟，单位mstransitionDuration : 0.4,  // 动画变换时间，单位sbackgroundColor: 'rgba(153, 0, 255,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色borderColor: '#333',       // 提示边框颜色borderRadius: 4,           // 提示边框圆角，单位px，默认为4borderWidth: 0,            // 提示边框线宽，单位px，默认为0（无边框）padding: [5,5,5,0],                // 提示内边距，单位px，默认各方向内边距为5，// 接受数组分别设定上右下左边距，同cssaxisPointer : {            // 坐标轴指示器，坐标轴触发有效type : 'cross',         // 默认为直线，可选为：'line' | 'shadow'lineStyle : {          // 直线指示器样式设置width: 1,fontSize:30,},shadowStyle : {                       // 阴影指示器样式设置width: 'lift',                   // 阴影大小color: 'rgba(150,150,150,0.3)'  // 阴影颜色}},formatter:function(data){//自定义显示内容var rsl='';rsl = "x轴的数据 ： " + data[0].name;rsl+= "<br/>y轴的数据 ： " + data[0].data;return rsl;},textStyle: {//提示内容字体设置color: '#fff'}},series: [{type:'line',lineStyle:{                 width:3,  // 设置线宽type:'solid'  //'dotted'虚线 'solid'实线},smooth: true,//  color:'red',symbol:'star',//拐点样式// symbolSize:30,symbolSize:1,//拐点大小markLine: {data: [{type: 'average', name: '平均值'}]},markPoint: {itemStyle:{borderColor: '#000',//图形的描边颜色。支持的颜色格式同 color，不支持回调函数。borderWidth: 0,//描边线宽。为 0 时无描边。borderType: 'solid' //柱条的描边类型，默认为实线，支持 ‘solid’, ‘dashed’, ‘dotted’。},data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}],},},]
};
myChart.showLoading();//启动动画
fetchData();//获取值
if (option && typeof option === "object") {myChart.setOption(option, true);
}
</script></body>
</html>

echarts画折线图和数据excel导出相关推荐

python导入数据画折线图_Python读取Excel表格,并同时画折线图和柱状图的方法
今日给大家分享一个Python读取Excel表格,同时采用表格中的数值画图柱状图和折线图,这里只需要几行代码便可以实. 首先我们需要安装一个Excel操作的库xlrd,这个很简单,在安装Python后 ...
手把手教你用ECharts画折线图
导读:折线图是一种基础图表,适合表示数据的变化趋势,常用于时间序列数据的表示. 作者:王大伟来源:大数据DT(ID:hzdashuju) 在正式学习之前,先来了解一个ECharts官网提供的很好用的 ...
折线图_手把手教你用ECharts画折线图
导读:折线图是一种基础图表,适合表示数据的变化趋势,常用于时间序列数据的表示. 作者:王大伟来源:华章科技在正式学习之前,先来了解一个ECharts官网提供的很好用的功能.该功能可以实时显示代码的 ...
vue引入Echarts画折线图、平滑曲线图、转化数学公式详解
目录 1 引入Echarts 1.1 安装 1.2 引入 1.3 基本使用 2 基本折线图 3 复杂折线图 3.1 多条折线 3.2 动态变化折线图 4 笛卡尔坐标系中的折线图 5 平滑曲线图 6 折 ...
如何使用python画折线图-Python数据可视化：使用Python画柱状图和折线图
Python爬虫太火了,没写过爬虫,都不敢说自己学过Python?! 可是刚一开始学我就遇到了难题----数据分析!听起来很高大上,有没有? 想要做爬虫,就得先学会使用数据分析工具,制作图表这是最基本 ...
小程序mpvue图片绘制水印_基于mpvue小程序使用echarts画折线图的方法示例
第一次使用mpvue框架来写小程序,项目开发直接搬用mpvue-shop(一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择. 关 ...
小程序mpvue图片绘制水印_基于mpvue小程序使用echarts画折线图
第一次使用mpvue框架来写小程序,项目开发直接搬用 mpvue-shop (一个仿网易严选的小程序开发项目),项目结构清楚,实现了大部分功能,对于初次使用mpvue的小伙伴们来说,是一个很好的选择. ...
用python读取excel数据、并作图_Python读取Excel表格,并同时画折线图和柱状图的方法...
今日给大家分享一个Python读取Excel表格,同时采用表格中的数值画图柱状图和折线图,这里只需要几行代码便可以实. 首先我们需要安装一个Excel操作的库xlrd,这个很简单,在安装Python后 ...
python画柱状图和折线图-Python读取Excel表格,并同时画折线图和柱状图的方法
今日给大家分享一个Python读取Excel表格,同时采用表格中的数值画图柱状图和折线图,这里只需要几行代码便可以实. 首先我们需要安装一个Excel操作的库xlrd,这个很简单,在安装Python后 ...

echarts画折线图和数据excel导出

echarts画折线图和数据excel导出相关推荐

最新文章

热门文章