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>https://www.jianshu.com/p/971ef68584a9</u>
O�?��j
网友评论