echart图形绘制
1.绘制折线图 let myDom = document.querySelector(dom);//要放的元素 let myChart = echarts.init(myDom, 'light');//使用的主题 let option = { tooltip: { trigger: 'axis' }, legend: { data: ['人气量', '收藏量', '转发量', '动态量'], right: 'center', bottom: 0, orient: 'horizontal' }, calculable: true, xAxis: [ { type: 'category', boundaryGap: false, data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'] } ], yAxis: [ { // min: 0, // max: 70 type: 'value' } ], series: [ { name: '人气量', type: 'line',//所要选择的图形类型 itemStyle: { // 点的颜色。 color: '#3995f5' }, data: [5, 20, 36, 10, 10, 20, 40] }, { name: '收藏量', type: 'line', itemStyle: { // 点的颜色。 color: '#15bc84' }, data: [2, 21, 24, 36, 28, 60, 69] }, { name: '转发量', type: 'line', itemStyle: { // 点的颜色。 color: '#ff933e' }, data: [3, 58, 36, 20, 14, 37, 45] }, { name: '动态量', type: 'line', itemStyle: { // 点的颜色。 color: '#db5972' }, data: [6, 4, 8, 15, 35, 48, 50] }, ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
2.玫瑰图形
let option = { legend: { data: [datas[0].name, datas[1].name], right: 'center', bottom: '10%', orient: 'horizontal' }, series: [ { name: '访问来源', type: 'pie', radius: '70%', center: ['50%', '40%'], label: { show: true, formatter: '{b}: {c}({d}%)'//所要显示数据的格式 }, data: [ {value: datas[0].value, name: datas[0].name, itemStyle: {color: '#15bc84'}}, {value: datas[1].value, name: datas[1].name, itemStyle: {color: '#ff933e'}}, ] } ] };
3.柱状图
let option = { legend: { data: [datas[0].name, datas[1].name], right: 'center', bottom: '10%', orient: 'horizontal' }, grid:{ x:100, y:80, x2:100, y2:150, }, calculable : true, xAxis : [ { type : 'category', data : tamp } ], yAxis : [ { type : 'value' } ], series: [ { name:datas[0].name, type:'bar', itemStyle: {color: '#15bc84'}, data:datas[0].value, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } }, { name:datas[1].name, type:'bar', itemStyle: {color: '#ff933e'}, data:datas[1].value, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } } ] };