一、示例
echart小程序示例
gitub地址：GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本
在小程序中放入
效果
二、 小程序代码
json 组件的位置取决于一示例中的的echart的位置
{
"navigationStyle":"custom",
"usingComponents": {
"ec-canvas":"../../ec-canvas/ec-canvas"
}
}wxml
<coverheader headerOpt="{{headerOpt}}"></coverheader>
<wxs src="./../../filter/urlFilter.wxs" module="filter" />
<view class="tendency">
<view class="chartScreen">
<view class="chart_item" wx:for="{{tendencyList}}" wx:key="index">
<view class="check {{!filter.includesArr(chooseId,item.value)?'checked'+index:''}}" bindtap="clickcheck" data-item="{{item}}"></view>
<view>{{item.label}}</view>
</view>
</view>
<view class="echart_line">
<view class="echart_line1">
<ec-canvas id="mychart" canvas-id="mychart" ec="{{ ec }}"></ec-canvas>
</view>
</view>
</view>js
var request = require('../../utils/request.js');
let util=require('../../utils/util')
import {getTopicAnalysis } from "../../utils/api/test/test";
import * as echarts from '../../ec-canvas/echarts';
Page({
/**
* 页面的初始数据
*/
data: {
headerOpt:{
showGoHome:false,
title:"详情页",
// styles:'background-image:url(https://assets-dajieimg.oss-cn-beijing.aliyuncs.com/meishu/login/bg_top.png);background-size:100% 100%'
},
navigationBarAndStatusBarHeight:wx.getStorageSync('statusBarHeight') + wx.getStorageSync('navigationBarHeight') + 'px',
tendencyList:[{label:'1',value:1},{label:'2',value:2},{label:'3',value:3},{label:'4',value:4},{label:'5',value:5},{label:'6',value:6,}],
chooseList:[],//选中的list
chooseId:[],//选中的id
ec: {
lazyLoad: true // 延迟加载
},
Chart:null,
},
clickcheck(e){
let that=this
let items=e.currentTarget.dataset.item
let id=e.currentTarget.dataset.item.value
let chooseId=that.data.chooseId
let chooseList=that.data.chooseList
console.log(id);
// 如果id不存在加入
if(!chooseId.includes(id)){
chooseId.push(id)
chooseList.push(items)
}else{
//删除id
var index = chooseId.findIndex(item => {return item === id})
chooseId.splice(index,1)
chooseList.splice(index,1)
}
console.log(chooseId);
that.setData({
chooseId,
chooseList,
})
that.getseriesInfo()
},
getseriesInfo(){
let colorArr= ['#556FFD', '#57BE6A', '#DF699B', '#98A1D0', '#EED46C','#D64052','#E3C24B']
//传递的参数--
getTopicAnalysis({chooseId:this.data.chooseId}).then((res)=>{
if(res.data){
let xAxisinfo = [];
let legendInfo = [];
let seriesInfo = [];
res.data.forEach((ele,index) => {
let params = {
data: [],
type: 'line',
showSymbol: false,
name: '',
lineStyle:{
color:colorArr[index]
},
};
legendInfo.push(ele.topicName)//topicId 话题id
params.name = ele.topicName;
ele.dailyData.forEach((eleData) => {
if(index == 0){
xAxisinfo.push(eleData.date)
}
params.data.push(eleData.cnt)
});
seriesInfo.push(params);
})
this.setData({
xAxisinfo,
legendInfo,
seriesInfo
})
console.log(seriesInfo);
if (!this.data.Chart){
this.init_echarts(); //初始化图表
}else{
this.setOption(); //更新数据
}
console.log(seriesInfo);
}
})
},
//综合数据图标初始化
init_echarts: function () {
this.echartsComponnet.init((canvas, width, height,dpr) => {
// 初始化图表
const Chart = echarts.init(canvas, null, {
// renderer: 'svg',
width: width,
height: height,
devicePixelRatio: dpr // new
});
Chart.setOption(this.setOption());
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
return Chart;
});
},
//综合数据直线设置数据
setOption(){
return {
// color: ['#DC2FDC', '#1B89FF', '#87EEFB', '#EEAD6C', '#EED46C'],
tooltip: {
trigger: 'axis',
confine: true,
// showContent: false,
backgroundColor: 'rgba(255,255,255,0.5)',
borderWidth: 1,
borderColor: '#e2e6f5',
borderRadius: 4,
padding: [10, 20, 10, 20],
textStyle: {
color: "#949AB7",
},
axisPointer: {
type: "cross",
label: {
show:false,
// backgroundColor: 'rgba(39, 100, 131, 0.71)',
// backgroundColor: 'null',
},
lineStyle:{
backgroundColor: 'rgba(39, 100, 131, 0.71)',
}
},
formatter: function (params) {
let str = params[0].name+'\n'
let newParams = [];
let tooltipString = [];
newParams = [...params];
newParams.sort((a,b) => {return Number(b.value) - Number(a.value)});
newParams.forEach((ele,index) => {
str +=ele.seriesName+ele.value+'\n'
})
return str
}
},
grid: {
left: 20,
right: 20,
bottom: 15,
top: 40,
containLabel: true
},
legend: {
icon:'circle',
show:false,
itemHeight: 12,
itemWidth: 12,
top:'bottom',
textStyle: {
//图例文字的样式
color: '#3F96D5',
fontSize: 12
},
data: this.data.legendInfo,
},
xAxis: {
axisLabel:{
color: "#9095A7", //刻度线标签颜色
lineStyle:{
color:'#9095A7',//更改坐标轴颜色
},
},
axisTick:{show:false},
axisPointer: {
lineStyle:{
color:'rgba(39, 100, 131, 1)'
}
},
//设置轴线的属性
axisLine:{
lineStyle: {
color: '#DFE1EB',//刻度线的颜色
}
},
type: 'category',
boundaryGap: false,
data: this.data.xAxisinfo,
},
yAxis: {
splitLine: {
lineStyle: {
type: 'dashed',
color:'#DFE1EB'
}
},
boundaryGap: [0, '50%'],
type: 'value',
// name: 'GMV',
position: 'left',
axisLabel: {
color: "#9095A7", //刻度线标签颜色
formatter(v) {
v = v.toString()
if (v >= 100000000000) {
return (v.substring(0, 5) / 10) + '亿'
} else if (v >= 10000000000) {
return (v.substring(0, 4) / 10) + '亿'
} else if (v >= 1000000000) {
return (v.substring(0, 3) / 10) + '亿'
} else if (v >= 100000000) {
return (v.substring(0, 2) / 10) + '亿'
} else if (v >= 10000000) {
return v.substring(0, 4) + 'w'
} else if (v >= 1000000) {
return v.substring(0, 3) + 'w'
} else if (v >= 100000) {
return v.substring(0, 2) + 'w'
} else if (v >= 10000) {
return (v.substring(0, 2) / 10) + 'w'
} else if (v >= 1000) {
return v
} else {
return v
}
},
},
axisPointer: {
lineStyle:{
color:'rgba(39, 100, 131, 1)'
}
},
},
series: this.data.seriesInfo,
grid: {top: '5%',right:'8%',bottom:'10%',left:'14%'},
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.echartsComponnet = this.selectComponent('#mychart');
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})wxss
page{
background-color: #F5F5F5;
color:#212848;
}
.tendency{background-color: #fff;padding: 30rpx;margin-top:20rpx ;}
.sec_title{font-size: 32rpx;font-weight: 500;margin-bottom: 36rpx;}
.chartScreen{display: flex;align-items: center;flex-wrap: wrap;}
.chart_item{display: flex;align-items: center;flex-shrink: 0;margin-right: 30rpx;font-size: 24rpx;margin-bottom: 18rpx;}
.check{width: 28rpx;height: 28rpx; border: 2rpx solid #dbdbdb;border-radius: 4rpx;margin-right: 8rpx;}
.checked0{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAF8SURBVHgB7Za/S8NAFMe/76pInUpBF5f+Ce3iqqPgokNBXETcRLAOnXXvYAd1k9ZFBIfWQXHU2UFB3By6OAmSRYst6fNeQrGIlzYxvcV+lnBw3OfejySPoFkpcMZlrgCc1csUYoZA9RZ97tTLyQb5ss79MEQ/cNrUyimX3X0LMiE1zhMVpQNegjU4q2CXlG0hRsLQTKeBzVWCFaHIdreCjxxDTGRmgOKGQuOFcXTKxn2xRCiyPR3ZexM4DJDFIuyVlY47+GgG7zemNL/gF/782nzj+VnyGuT1TUsPOt6zH0bhVNo/0CTtyiSiQWWCMaUnNfYaQCJdW6ZfZUIYWaDQrwl7hy3OfQt6ZVXvUggF5bfdwLaS1JaKCpNJeHJZC5LmoPqa6NulIpHu68qFq9tosoGEwtOzX1NBUlitRZMJA39pLnVUorl7jC4LJRQklX/lf/wPHVhEprYH2IL5QiWI1mEnSqet2gV1VqZGglRO6+sYDo5+oW5k6pZR/wuVDZYh1UtPwwAAAABJRU5ErkJggg==') no-repeat;background-size: 100% 100%;}
.checked1{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGiSURBVHgB7Za9S0JRFMDPfUlqNEgiBAW5NDQEOgRt4ZhTg1BLQVMfk0FLS1FbYNRmtUgfg4NDDelW/QGBkVCBQwo29cGDzCzk3c559cLA9/T5cZf6LfddOO/97jnvcu9hgEwkZt3c2hYB4B6cOqDZcDhiH8pCdHQ7w75kUrIlot/I7F3xSkq7tClARji4lUUkxmAMhME8EojFIVoI/0LTuGxdMDcwCUKEJFv2Bg1jLNAk+jp7YHFwBrIvOQjfHOjGNSVDkq1gZq+lIoRvDw1jGxaWyzZSOzgWDON1Sxpw+/FgYBC7O9F9eaR7WN0gD8VnWEtu4fgE1dAVuuxO9YNEJakmK5TeapYRuiXdS8cgm8+pmU71ByrKiFUTMkMhrTyU2lXL5e/1/QjKZdqizMDGT+e5UYDL5oT1oSXosNjVTGhOxDJxw/+rR9VdSpIQ7j5NTsRzZ3XJahIS13JaLR+Ryd/D/vdzPdR80iQwK+Li8QoawdTRpkkb4W/chzIIBIX8EoShHGObyKdBTJYy3gVBKerD9pspXmrHoTVgMuycHOT6BBgHmtv8l4eBAAAAAElFTkSuQmCC') no-repeat;background-size: 100% 100%;}
.checked2{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGKSURBVHgB7Za/S8NAFMe/CbWDBCm1iIiDLp0cqlNdFBxcdBBxVXDSbnX0r9BNxUHQUQcFXRT8NXVSkW4O7SAo0oZQpEpoe967WlD00qRJb9EPhEvgkU/eu8vd08DJLW8MQAvt8NsEvyIIHHYIVl0Z3EzltU/ZbXtE37DAKsM6tI41BTIIB6+iztOdgToSOtQSUS3Ev9AzoW4DsYUxKBGSrDc97RyDgAj3R9GzNAn7sYjC7rU0LpAMSUaZ1d5sFPauHGN9C7/KXrZOUSvbjvHSkkamRsRondzIQmAk42KBVIqveF4/FmMzpMJQ1IAxGpdKGzLKyK2MkJbUPMiIBUCZRueSv8oILzJHYX1OzsTLuiaGEJsf/yGrf5QJL2i51DZzCqB/q291FnpnWMjpmaAyO82vjKarlCSUaUNOlC6yLclcCYn3hydRPoJKaO5n0Cqud5rSeZaf1UD5Pg8/eNraqJR++RvnoQWFkPAOimCMHem8OV2EmiwtDdW0Tu03dcSiHW+TiF+X5CDXBwmPnVkfFK3qAAAAAElFTkSuQmCC') no-repeat;background-size: 100% 100%;}
.checked3{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGgSURBVHgB7ZZNSwJRFIbfew0jUsgiiqAQjIQWleCm2tjKTUHQL3DZrn5Jy9pJ/8BolZtsoS1U1Fy4CoYkSbIyEiRBb/dMKQbO6Pgxm3o2d2Y4M8+ccz8ZJKfBlJNZWFAIbDBgCsOGISTq4vgw4FEYycBZaiSiX06UGw3h4dzCTkYtI4R0UBW5LOM+TILJLuMwEcrSVCHxLzSMfdIK39YiTBGSbM/vksORacaMYUjMOCbg33Gi9FZFJPqgGTeUDElGmdVqddxE87qxAwvbZVcRBZ+y1UOzpN71OZqoSGaKmi+7XQ74tpfwUanhMnyvtt3QFNrkAHAvT6vXnaRNGWXUq4zQLGksUcDLa1VmOo9N70JHGWFEpits9gl9bG11tjW32mWx+PdPGYGdnaeFXoDdZsXB7grGrRZVTvdEQpY5mXmCUbqOUpKEr5WWnMjmSn3JehIShWIFt7J8BJUwFn9Ev/S80tzlntVpouTfMQiGlraslA7KH9gPZb+UYSJcbl1pmIRoiAsuT8QBM7L8cRxxOn5DnojlkxBGgCoSiJCDXF/Qr6qL/ZClCgAAAABJRU5ErkJggg==') no-repeat;background-size: 100% 100%;}
.checked4{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGdSURBVHgB7Za/S0JRFMe/72UpEWhgIS5ltLTpf6BTDQ0SYaM155BTLQZtCoWLTkLmaBQY+Ac4NLXoUlOQYYhmmJBJIvq650Hi4I/3tHeX+kzvvnfhw3nnnHuPAEbW6V42QIhLEOxsacLvk2qi43dkUnmBZHqIWY1EvdSY1CHqMRXmICNMevYXRUBygxuCXQRfTLyF+BeqZtqyCOuhD1yEJFsKn7BihPZCw6pNln095lEMRqCp8EfWrjdQDEWG7p1Y2Ct7CYTQqX9iLKHZ68GCdwfDMK67YIudyrJn/zFapVeMQjfowwwrAOOGS36uJJJ9ZdYjH4tIuYwYGGE5GkeTFYB51wPL/l5fGaFGNlTYZrkosJy0ShXMb292e6tXVo6es6p8ghqEB+eWNGwD9dZK7Azi3KwcCa2Jt8QlKhdJqGVklZKkEAh25UT1Oj2WTJGQaOTuUWI5Jaixy5E4xkWndOP7VVo+sT5u7zAJioVElUkn5W/chzVwhKa2HDghQboRBUh0bvGIsiZCOhDXaPxmEzF7kYI2sGCkDDnI9Q1gapfGPx2fagAAAABJRU5ErkJggg==') no-repeat;background-size: 100% 100%;}
.checked5{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGbSURBVHgB7ZbLSwJBHMe/rksFhpiIQoee4CUQ7T+IOgQd6uytQ3c9Bh2Luhl19NDNs966FZ26FQkdhLYXBWnZKito7aP5DdkDdHV97KU+MMwsDPvZ78zOwwHG9dHihOh0HrBmmBUPeo6RVjU9Pjl3eOP4lJ31R/QLWdW0iCA6xYQNMsJDoyiwuCuwj7AAe/HYLcS/0DLikB/eYAy2CEnmC+3AMOuDHjHgmoJ3ZgOqIuE1t9u0X08SkswX2oahKijmEqZ9uxZ+yyp4udyCzuqOhO7xKC9muALz8M/ucVkhuw61+oRWNJ1D56CfvXCBt8u3qYaykWDckoxomrAkJfFekeAei8IzvdZQRhQu2peZCnU+J5vQankMjy5/ra2fMvkqiTf2UVZw3J8smS0bvrYCkX04RBdLkufPBA1z+S4Fq7T8S0nyzJLW5YTykOlI1paQqJWyfPgImldZSqJT2t5plMcMr6vFU3SDpa2tLu2Gv3EeyrAREp7DJgzDyAjscroKO1IakDVdjwl0/aYbMdt00ugHBg9zrOpahFwfXxGjuLpZ9F0AAAAASUVORK5CYII=') no-repeat;background-size: 100% 100%;}
.echart_line{display: flex;align-items: center;}
.echart_line .echart_line1{height: 420rpx;width:100%;}
