1，加載資源包，引入資源
image.png
2，頁面結構
image.png
3，在methods里面定義方法
餅圖：
image.png
image.png
上面一個餅圖對應的echarts屬性值：
var option = {
color: ['#47B3FF', '#EEF1F7'],
title: {
text: '20%',
x: 'center',
y: 'center',
textStyle : {
color : 'rgba(0,0,0,0.6)',
fontSize : 16,
fontWeight : 'bolder'
}
},
series : [
{
type : 'pie',
center : ['50%', '50%'], //餅圖的位置放在整個外部的中間
radius : [35, 45], //內環外環的半徑
itemStyle : {
normal: {
label: {show:false},
labelLine: {show:false}
},
},
data : [
{value: 5, name:''},
{value: 15, name:''}
]
},
]
}
4，在updated 生命周期里面調用 方法繪圖
image.png
5，例子
餅圖：
image.png
獲取頁面節點：
let myChart = echarts.init(document.getElementById("echarts-dom"));
屬性值：
var option = {
color: ['#47B3FF', '#39E4C9'],
title: {
text: -6868.32 + '㎡', //主標題
subtext: '月度變化', //副標題
x: 'center',
y: 'center',
textStyle : {
color : 'rgba(0,0,0,0.6)',
fontSize : 16,
fontWeight : 'bolder'
},
formatter: function(val){
return "200"
}
},
series : [
{
type : 'pie',
center : ['50%', '50%'],
radius : [50, 55],
itemStyle : {
normal: {
label: {show:false},
labelLine: {show:false}
},
},
data : [
{value: 6868.32,name:""},
{value: 0,name:""}
]
},
]
};
繪圖：
myChart.setOption(option);
折線圖
image.png
屬性值：
let option = {
tooltip : { //設置懸浮出來的數據及結構
trigger: 'axis',
show: true,
formatter: function (val) { //val.data 是 data這個數組 里面當前懸浮的數字作為下標 對應到data 的一個對象
return val[0].data.date + '</br>'+ val[0].data.value+'%'; //return 是鼠標懸浮著顯示的數據及結構
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['2018-12-09', '2018-12-10'], //橫坐標的值
splitLine: {
show: false
}
}
],
yAxis : [
{
type : 'value',
axisLabel: {
formatter: '{value}%'
},
splitLine: {
show: false
}
}
],
grid:{
left: '60',
},
series : [
{
name:'入駐率',
type:'line',
smooth:true,
itemStyle: {
normal: {
areaStyle: {
type: 'default',
color: '#D9EFFC',
},
lineStyle: {
color: '#88CEFE',
}
}
},
data: [
{
value: 20,
date: '2018-12-09'
},
{
value: 30,
date: '2018-12-10'
}
]
},
]
}
柱狀圖
image.png
image.png
屬性值：
let option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'
},
formatter: function (val) { //鼠標懸浮柱子顯示本條柱狀的基礎數據
let text = '',
storename = val[0].name,
value = val[0].data.value + '%',
change =val[0].data.changeval;
text = storename + ': ' + value + '<br />' + "比昨日 ";
if(change > 0){
text += '<span style="color:#FFC267">新增</span> '+change+'%';
}else if(change == 0){
text += '無變化';
}else if(change < 0){
text += '<span style="color:#FF2B2B">減少</span> '+(-change)+'%';
}
return text;
}
},
grid:{
left: '40',
y2: 120
},
xAxis : [
{
type : 'category',
nameTextStyle:{
fontSize: '10',
},
axisLabel:{
formatter: function (value) {
//x軸的文字改為豎版顯示
var str = value.split("");
return str.join("\n");
},
},
data : ['星湖島', '星蘇島'],
// axisTick: {
// alignWithLabel: true
// }
}
],
yAxis :[
{
type : 'value',
axisLabel: {
formatter: '{value}%'
},
splitLine: {
show: false
}
}
],
series : [
{
name: '門店入駐率',
type:'bar',
barWidth: 18,
barCategoryGap: '1%', // 系列級個性化，柱形寬度
itemStyle: {
normal: { // 系列級個性化，橫向漸變填充
borderRadius: 5,
color : '#46B3FF',
label : {
show : true,
textStyle : {
fontSize : '15',
fontFamily : '微軟雅黑',
//fontWeight : 'bold'
color: 'black',
},
formatter:function(params){ //設置柱狀圖上的數字0顯示 非0不顯示數字
if(params.value == 0){
return params.value;
}else{
return '';
}
}
}
}
},
data: [
{value: 100, changeval: 20}
{value: 90, changeval: -1}
],
},
]
};
切換城市 柱狀圖的圖形發生改變
image.png
這里的切換利用vue的數據驅動視圖的特點 但有個問題是圖形先畫好了 改變數據出現的圖形不自適應頁面 所以這里
對數據進行判斷 1，設置圖形的外部寬度 2，重新繪制柱狀圖
image.png
image.png
image.png
資源收集
柱狀圖：
<u>http://www.echartsjs.com/examples/editor.html?c=line-simple</u>
餅圖：
<u>http://gallery.echartsjs.com/editor.html?c=xWFEbXAc2P</u>
資源文檔：
<u>http://echarts.baidu.com/echarts2/doc/example.html</u>
屬性文檔：
添加交互事件：
<u>https://www.cnblogs.com/zhenghengbin/p/7258378.html</u>
<u>https://blog.csdn.net/qq_27098879/article/details/80180038</u>
解決數據獲取加載問題
<u>https://blog.csdn.net/szw_18583757301/article/details/80976463</u>
財務小程序端tapd:
統計看板接口文檔：
<u>https://www.tapd.cn/31858311/markdown_wikis/view/#1131858311001001990</u>
小程序文件上傳：
<u>http://www.lxweimin.com/p/971ef68584a9</u>
O????j
