echarts图表自定义按钮导出和echarts内置导出设置

    xiaoxiao2022-07-05  163

    自定义按钮导出

    var option = { title : { text: '一周气温变化', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' }, legend: { data:['最高气温','最低气温'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value} °C' } } ], series : [ { name:'最高气温', type:'line', data:[11, 11, 15, 13, 12, 13, 10], markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } }, { name:'最低气温', type:'line', data:[1, -2, 2, 5, 3, 2, 0], markPoint : { data : [ {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5} ] }, markLine : { data : [ {type : 'average', name : '平均值'} ] } } ] }; </script> <script type="text/javascript"> $(document).ready(function() { var myChart = echarts.init(document.getElementById('test')); myChart.setOption(option); $("#button").click(function() { var i = myChart.getDataURL({ type:'png', backgroundColor:'white' // 导出的图片分辨率比例,默认为 1。 //pixelRatio: number, }); $(this).attr("href",i); $(this).attr("download","test.png"); }); });

    第二种echarts 内置api导出设置

    // 指定图表的配置项和数据 var option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, grid: { top: '10%', }, calculable: true, toolbox: { id:'pie-chart', feature: { saveAsImage: { type: 'jpeg',// 设置图片格式 png或者'jpeg name: '一周气温变化', backgroundColor: '#FFF', excludeComponents: ['toolbox'], show: true, title: '保存图片', // icon: ..., } } }, series: [{ name: '', center: ['50%', '50%'], type: 'pie', radius: [0, '55%'], selectedMode: 'single', selectedOffset: 20, hoverAnimation: true, labelLine: { // 标示线设置长度 normal: { length: 160, length: 80, lineStyle: { width: 2 } }, }, label: { normal: { formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}:}\n共{c}件,{per|占比{d}%} ', borderRadius: 4, padding: [0, 7], rich: { a: { color: '#999', lineHeight: 33, align: 'center' }, hr: { borderColor: '#aaa', width: '100%', height: 0 }, b: { fontSize: 16, fontWeight: 600, lineHeight: 33 }, per: { padding: [1, 4], borderRadius: 2 } } } }, itemStyle: { normal: { color: function (params) { var colors = ['#5992F3', '#554BFB', '#B14BFD', '#FD9C34', '#DF4442', '#BC3B45', '#DB3D6E', '#28BF7E']; return colors[params.dataIndex] } } }, data: data }] };

    链接:echarts 导出配置项

    最新回复(0)