首页分享 Echarts 图表插件学习（2）

Echarts 图表插件学习（2）

来源：花匠小妙招时间：2025-01-11 22:33

自定义导出：

工具栏导出：

上代码：

<!DOCTYPE html>

<head>

<title>ECharts</title>

</head>

<body>

<p></p>

var myChart = "";

require.config({

paths: {

echarts: 'http://echarts.baidu.com/build/dist'

}

});

require(

[

'echarts',

'echarts/chart/bar'

function (ec) {

myChart = ec.init(document.getElementById('main'));

var option = {

tooltip: {

show: true

legend: {

data:['销量']

xAxis : [

{

type : 'category',

data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

}

yAxis : [

{

type : 'value'

}

series : [

{

"name":"销量",

"type":"bar",

"data":[5, 20, 40, 10, 10, 20]

}

]

};

myChart.setOption(option);

setTimeout(function() {

var img = new Image();

img.src = myChart.getDataURL({

type:"png",

pixelRatio: 2,

backgroundColor: '#fff'

});

img.onload=function(){

var canvas=document.createElement("canvas");

canvas.width=img.width;

canvas.height=img.height;

var ctx=canvas.getContext('2d');

ctx.drawImage(img,0,0);

var dataURL=canvas.toDataURL('image/png');

var a = document.createElement('a');

var event = new MouseEvent('click');

a.download = '矩形图表.png' || '下载图片名称';

a.href = dataURL;

a.dispatchEvent(event);

};

}, 1000)

}

);

</script>

require.config({

paths: {

echarts: 'http://echarts.baidu.com/build/dist'

}

});

require(

[

'echarts',

'echarts/chart/line'

function (ec) {

var myChart = ec.init(document.getElementById('main2'));

var option1 = {

title : {

text: '未来一周气温变化',

subtext: '纯属虚构'

tooltip : {

trigger: 'axis'

legend: {

data:['最高气温','最低气温','深圳气温']

grid:{

containLabel:true

calculable : true,

toolbox: {

show : true,

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

magicType : {show: true, type: ['line', 'bar']},

restore : {show: true},

saveAsImage : {show: 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],

{

name:'最低气温',

type:'line',

data:[1, -2, 2, 50000000, 3, 2, 0],

{

name:'深圳气温',

type:'line',

data:[6, -2, 3, 5, 3, 2, 14],

}

]

};

myChart.setOption(option1);

}

);

</script>

</body>

</html>

推荐分享

家庭养花风水知识家庭养花“五行说”

家庭养花知识大全家庭养花有什么好处

秋天养花，掌握这5点养花知识，正确管理花卉，让花健康生长

【花卉知识】养花须知：新手养花的选购技巧，不要当冤大头！

Echarts 图表插件学习（2）

推荐分享

家庭养花风水知识 家庭养花“五行说”

家庭养花知识大全 家庭养花有什么好处

秋天养花，掌握这5点养花知识，正确管理花卉，让花健康生长

【花卉知识 】养花须知：新手养花的选购技巧，不要当冤大头！

家庭养花风水知识家庭养花“五行说”

家庭养花知识大全家庭养花有什么好处

【花卉知识】养花须知：新手养花的选购技巧，不要当冤大头！