f-loat / mpvue-echarts Goto Github PK
View Code? Open in Web Editor NEWThis project forked from ecomfe/echarts-for-weixin
📈 适用于 mpvue 的 echarts 组件
This project forked from ecomfe/echarts-for-weixin
📈 适用于 mpvue 的 echarts 组件
如题
如果需要改变图标的样式 怎么处理 望大神指点一哈 感谢感谢
Template "334c8922" not found. <template name="6224ccf9"> <view class="_div data-v-68efa517 echarts-wrap"> <template canvasId="demo-canvas" data="{{...$root[$kk+'0'], $root}}" is="334c8922"></template> </view> </template>
map设置roam: true,但是不能缩放,只能拖拽
真心好用,免掉烦人的兼容配置
如题
能够复现问题的小Demo:https://github.com/DirtyIndustry/echartsupdate
在www.dcloud.io下载HBuilderX(APP开发版),打开Demo工程文件夹,就可以在手机或者微信开发者工具里运行了。代码里的注释也说明了一下问题。
Demo工程中/components/myChart.vue是包含一个mpvue-echarts的组件,echarts实例声明在script中,用props传入canvasId和option,然后设置一个watch监视option变化,当option变化时用chart.setOption(newValue)将新数据显示出来。
/pages/index/index.vue是主页,里面加载了两个myChart组件,通过一个button改变两个myChart的option值。
这两个myChart可以正常初始化并显示正确的数据,但是如果改变option触发watch中的setOption()的话,只有第二个myChart组件会触发更新,并且两个option都显示在了第二个chart上,第一个chart完全不会更新。
如果watch中改用init()的话两个chart可以分别显示正确的数据。但这似乎不是正确或者官方的做法?
请问应该怎样修改这个组件才能正常使用setOption更新数据呢?
谢谢!
帮忙看一下,谢谢了。
<div class="container">
<button @click="initChart">初始化</button>
<div class="wrap">
<mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleInit" ref="echarts" />
</div>
</div>
</template>
<script>
import * as echarts from '@/libs/echarts.simple.min'
import mpvueEcharts from 'mpvue-echarts'
let chart = null
export default {
data () {
return {
option: null,
echarts
}
},
components: {
mpvueEcharts
},
methods: {
initChart () {
this.option = {
color: ['#37a2da', '#32c5e9', '#67e0e3'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: ['热度', '正面', '负面']
},
grid: {
left: 20,
right: 20,
bottom: 15,
top: 40,
containLabel: true
},
xAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}
],
yAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}
],
series: [
{
name: '热度',
type: 'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [300, 270, 340, 344, 300, 320, 310],
itemStyle: {
emphasis: {
color: '#37a2da'
}
}
},
{
name: '正面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true
}
},
data: [120, 102, 141, 174, 190, 250, 220],
itemStyle: {
emphasis: {
color: '#32c5e9'
}
}
},
{
name: '负面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'left'
}
},
data: [-20, -32, -21, -34, -90, -130, -110],
itemStyle: {
emphasis: {
color: '#67e0e3'
}
}
}
]
}
this.$refs.echarts.init()
},
handleInit (canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
chart.setOption(this.option)
return chart
}
},
mounted() {
// Echart 实例 chart 何时能取到、 因为要调用实例的一些办法
}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
一个页面多个懒加载实例,只能显示一个是怎么回事尼。跟普通的一个页面多个实例写法是一样的么
安装完echarts后小程序代码包超过2048kb了怎么办
您好,我的项目中就用了一个简单的折线图,一引入这个插件和echars直接就飚到3M多,无法打包?
如何按需加载呢?
看了示例代码不知道为什么要把initChart赋给属性onInit?
因为实际开发中数据都是动态获取赋值的,我就把initChart放到methods中动态调用生成图表。
export default { components: { mpvueEcharts },
data() { return { echarts, dateArr: ["18.08.13", "18.08.13", "18.08.13", "18.08.13"], data: [63, 73, 83, 85], subtext: "单位:cm", title: "身高" // onInit: initChart }; },
methods: { init() { utils.setTitle("结果"); this.onInit(); }, onInit: initChart },
mounted() { this.init(); } };
直接报Cannot read property 'getAttribute' of undefined 的错误,
但是图表还是显示了,不知道是什么原因
Error: 代码包大小为 2985 kb,上限为 2048 kb,请删除文件后重试
如图,对这两行字体分别定义不同的样式和大小,但是富文本识别不了。
xAxis: { show: false, position: 'top', data: _this.dateList, axisPointer: { show: true, type: 'line', padding: [10, 0], label: { color: '#2b3038', backgroundColor: '#fff', shadowColor: '#fff', formatter: function (params) { return '{data|' + params.seriesData[0].value.toFixed(4) + '}{time|' + '\n' + params.value + '}' }, rich: { data: { color: '#2b3038', fontSize: 16 }, time: { color: '#b2b5b7', fontSize: 10 } }, lineHeight: 56 }, lineStyle: { color: '#CBD0D6', type: 'dotted', height: '243px' } } }
<div class="echarts-wrap">
<mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleInitChart" ref="echarts" canvasId="demo-canvas" />
</div>
<div class="echarts-bar">
<mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleInitBarChart" ref="echartsBar" throttleTouch canvasId="canvas-bar" />
</div>
initChartBar () {
this.optionBar = {
title: {
text: 'TOP5 省份'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.topName
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
series: [
{
type: 'bar',
label: {
show: true,
position: 'insideTop'
},
barWidth: 20,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#66a6ff'},
{offset: 1, color: '#89f7fe'}
]
)
}
},
data: this.topVal
}
]
}
this.$refs.echartsBar.init()
},
initChart () {
var mapName = 'china'
var geoCoordMap = {}
// chart.showLoading()
var mapFeatures = echarts.getMap(mapName).geoJson.features
// chart.hideLoading()
mapFeatures.forEach(function (v) {
// 地区名称o
var name = v.properties.name
// 地区经纬度
geoCoordMap[name] = v.properties.cp
})
var convertData = function (data) {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord !== '') {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
}
return res
}
this.option = {
visualMap: {
show: true,
min: 0,
max: 300,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true,
seriesIndex: [1],
inRange: {
color: ['#89f7fe', '#66a6ff']
}
},
geo: {
show: true,
map: mapName,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077'
},
emphasis: {
areaColor: '#2B91B7'
}
}
},
series: [{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(this.map),
symbolSize: function (val) {
return val[2] / 10
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
color: '#f6d365'
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: 'blue'
}
}
},
{
type: 'map',
map: mapName,
geoIndex: 0,
aspectScale: 0.75,
showLegendSymbol: false,
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077'
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: this.map
}
]
}
this.$refs.echarts.init()
},
如何循环渲染多个不同option的图表
例如
bar1数据为[820, 932, 901, 934, 1290, 1330, 1320],
bar2数据为[1820, 1932, 3901, 5934, 31290, 1330, 1320]
bar3数据为[2820, 2932, 4901, 6934, 11290, 1330, 1320]
要在页面渲染40个,这种要怎么解决
苹果手机和锤子手机上图表白屏,有人遇到过嘛,怎么解决呢
import * as echarts from '../../echarts.min.js'
import mpvueEcharts from 'mpvue-echarts'
.
.
.
错误信息:
thirdScriptError
this.echarts.setCanvasCreator is not a function;at pages/one/main page lifeCycleMethod onReady function
TypeError: this.echarts.setCanvasCreator is not a function
...,
touchStart(e) {
if (chart && e.mp.touches.length > 0) {
const touch = e.mp.touches[0];
// 此处将zr属性改为_zr, 否则为undefined
chart._zr.handler.dispatch('mousedown', {
zrX: touch.x,
zrY: touch.y,
});
chart._zr.handler.dispatch('mousemove', {
zrX: touch.x,
zrY: touch.y,
});
}
},
....
不知道是不是个例,希望作者可以看一下. 谢谢!
引入之前vendor.js只有70KB,引入后再编译就成了800多KB,检查后发现是整个引入echarts导致的,能不能分模块引用,比如我只需要bar, 就引用echarts中的bar模块?
如何引入基于echarts的第三方组件,如:echarts-liquidfill
小程序版echarts的dataZoom无效是吗
setTimeout(() => {
console.log(chart)
chart.clear()
}, 5000)
图表初始化后,调用clear或者dispose方法会报错Cannot read property 'hide' of undefined;at pages/loginOut/index onShow function;at setTimeout callback function
TypeError: Cannot read property 'hide' of undefined.
其中clear会清除图表后报错,dispose不会清除图表,使用mpvue官方demo也会如此
太大不让上传,使用了分包加载,也不行,还是被打包进了主包……
先把echarts设置为懒加载获取到数据之后怎么样把数据传进去 -
安装玩echarts后,打包上传发现超出2m的限制,请问作者是如何解决的?分包吗
柱状图一点就消失了,再点击出来了,经常闪烁
如题
在安装完vue-echarts后,按照提示我安装echarts,.
improt了echarts. 图表显示都正常,就是体积超过2M无法预览.
echart 引入后vendor.js超大了,2M多
npm run build后,可就减小到1M内,但这样调试太不方便
加上项目代码,更大了,请问有没有好的处理办法,非常感谢
如下图所示,我一个页面有两个实例,一个引入map实例,一个是bar实例,每次进这个页面都会报这个错;能否帮忙看一下呢
<template>
<div class="container">
<div class="chartMain">
<div class="echarts-wrap">
<mpvue-echarts lazyLoad @echarts="echarts" @onInit="handleInitChart" disableTouch="true" ref="echarts" canvasId="demo-canvas" />
</div>
<div class="echarts-bar">
<mpvue-echarts lazyLoad @echarts="echarts" @onInit="handleInitBarChart" disableTouch="true" ref="echartsBar" canvasId="canvas-bar" />
</div>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'
require('echarts/map/js/china')
let chart = null
let chartBar = null
export default {
components: {
mpvueEcharts
},
data () {
return {
echarts,
option: null,
optionBar: null,
map: [],
schoolName: '',
pCount: 0,
topName: [],
topVal: [],
locationCount: '',
userCount: ''
}
},
methods: {
handleInitChart (canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
chart.setOption(this.option)
return chart // 返回 chart 后可以自动绑定触摸操作
},
handleInitBarChart (canvas, width, height) {
chartBar = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chartBar)
chartBar.setOption(this.optionBar)
return chartBar // 返回 chart 后可以自动绑定触摸操作
},
initChartBar () {
this.optionBar = {
title: {
text: 'TOP5 省份',
textStyle: {
fontSize: 13
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.topName
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
series: [
{
type: 'bar',
label: {
show: true,
position: 'insideTop'
},
barWidth: 20,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#89f7fe'},
{offset: 1, color: '#66a6ff'}
]
)
}
},
data: this.topVal
}
]
}
this.$refs.echartsBar.init()
},
convertData (data) {
var mapName = 'china'
var geoCoordMap = {}
// chart.showLoading()
var mapFeatures = echarts.getMap(mapName).geoJson.features
// chart.hideLoading()
mapFeatures.forEach(function (v) {
// 地区名称o
var name = v.properties.name
// 地区经纬度
geoCoordMap[name] = v.properties.cp
})
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord !== '') {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
}
return res
},
initChart () {
var mapName = 'china'
this.option = {
visualMap: {
show: true,
min: 0,
max: 300,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true,
seriesIndex: [1],
inRange: {
color: ['#89f7fe', '#66a6ff']
}
},
geo: {
show: true,
map: mapName,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#FFFFFF',
borderColor: '#BFBFBF'
},
emphasis: {
areaColor: '#2B91B7'
}
}
},
series: [{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: this.convertData(this.map),
symbolSize: function (val) {
return val[2] / 10
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
color: '#FF6800',
fontSize: 8
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#89f7fe'
}
}
},
{
type: 'map',
map: mapName,
geoIndex: 0,
aspectScale: 0.75,
showLegendSymbol: false,
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077'
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: this.map
}
]
}
this.$refs.echarts.init()
},
getUniversityMap () {
var val = wx.getStorageSync('university')
var _this = this
_this.topName = []
_this.topVal = []
wx.request({
url: _this.GLOBAL.serverPath + '/api/user/getMapData',
method: 'GET',
data: {
university: val
},
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res)
_this.map = res.data.data.list
_this.pCount = res.data.data.list.length
if (_this.pCount >= 5) {
for (var i = 0; i < 5; i++) {
_this.topName.push(_this.map[i].name)
_this.topVal.push(_this.map[i].value)
}
} else {
for (var j = 0; j < _this.pCount; j++) {
_this.topName.push(_this.map[j].name)
_this.topVal.push(_this.map[j].value)
}
}
_this.initChart()
_this.initChartBar()
// _this.locationCity = res.data.data[1]
}
})
},
mounted () {
this.getUniversityMap()
}
}
</script>
<style scoped>
.school-name{
color: #5687e7;
}
.city-count{
color: #edb621;
}
.chartMain{
display: flex;
position: fixed;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
box-sizing: border-box;
/*background-image: linear-gradient( #66a6ff 0%, #89f7fe 100%);*/
background-size: 100%;
}
.echarts-wrap {
pointer-events: none;
width: 100%;
height: 500rpx;
}
.echarts-bar{
pointer-events: none;
width: 100%;
height: 500rpx;
}
.title{
margin-top: 20rpx;
text-align: center;
color: #5687e7;
}
.detail{
text-align: center;
font-size: 20rpx;
color: #66a6ff;
}
.floatBtn{
position: fixed;
bottom: 45%;
right: 10%;
border-radius: 80rpx;
}
.shareBtn{
color: #ffffff;
font-size:18rpx;
height:80rpx ;
width: 80rpx;
background-color: #5687e7;
border-radius: 80rpx;
box-shadow: 0 0 22rpx #2F330A;
opacity: 0.7;
}
</style>
在mpvue官网看说mpvuejs loader默认不babel处理node_modules内的包,会在低版本的手机报错?
这个库会不会有影响?
echras 和 mpvue-ehcars需不需要用babel转换一下?
"dependencies": {
"echarts": "^4.1.0",
"flyio": "^0.6.0",
"mpvue": "^1.0.11",
"mpvue-echarts": "^0.2.7",
"vuex": "^3.0.1"
},
如果多个图表在一个页面
那么那个width 和 height 只会获取第一个的宽和高
对于这个你怎么看的~ ~
iphone上一切正常,但是在小米手机上,draw回调不执行,导致wx.canvasToTempFilePath()不会执行,暂时还不知道为啥
经多次测试,去掉this.ctx.draw()这一层,完全正常!
this.ctx.draw(true, () => {
wx.canvasToTempFilePath({
canvasId,
...opt
});
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.