安装
mpvue-echarts的github地址
https://github.com/F-loat/mpvue-echarts
$ cnpm install mpvue-echarts
$ cnpm install echarts
DEMO
复制粘贴后即可看到效果
<!--
* @Author: wangyang
* @LastEditors: wangyang
* @Description: file content
* @Date: -- ::
* @LastEditTime: -- ::
-->
<template>
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="ecBarInit" canvasId="bar" />
<mpvue-echarts :echarts="echarts" :onInit="ecScatterInit" canvasId="scatter" />
</div>
</template> <script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'
let barChart, scatterChart
function getBarOption () {
return {
color: ['#37a2da', '#32c5e9', '#67e0e3'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ['热度', '正面', '负面']
},
grid: {
left: ,
right: ,
bottom: ,
top: ,
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: [, , , , , , ]
},
{
name: '正面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true
}
},
data: [, , , , , , ]
},
{
name: '负面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'left'
}
},
data: [-, -, -, -, -, -, -]
}
]
}
}
function getScatterOption () {
var data = []
var data2 = []
for (var i = ; i < ; i++) {
data.push(
[
Math.round(Math.random() * ),
Math.round(Math.random() * ),
Math.round(Math.random() * )
]
)
data2.push(
[
Math.round(Math.random() * ),
Math.round(Math.random() * ),
Math.round(Math.random() * )
]
)
}
var axisCommon = {
axisLabel: {
textStyle: {
color: '#C8C8C8'
}
},
axisTick: {
lineStyle: {
color: '#fff'
}
},
axisLine: {
lineStyle: {
color: '#C8C8C8'
}
},
splitLine: {
lineStyle: {
color: '#C8C8C8',
type: 'solid'
}
}
}
return {
color: ['#FF7070', '#60B6E3'],
backgroundColor: '#eee',
xAxis: axisCommon,
yAxis: axisCommon,
legend: {
data: ['aaaa', 'bbbb']
},
visualMap: {
show: false,
max: ,
inRange: {
symbolSize: [, ]
}
},
series: [{
type: 'scatter',
name: 'aaaa',
data: data
},
{
name: 'bbbb',
type: 'scatter',
data: data2
}
],
animationDelay: function (idx) {
return idx *
},
animationEasing: 'elasticOut'
}
}
export default {
data () {
return {
echarts,
ecBarInit: function (canvas, width, height) {
barChart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(barChart)
barChart.setOption(getBarOption())
return barChart
},
ecScatterInit: function (canvas, width, height) {
scatterChart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(scatterChart)
scatterChart.setOption(getScatterOption())
return scatterChart
}
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script> <style scoped>
.wrap {
width: %;
height: 400px;
}
</style>
效果图
折线图
<template>
<div class="container">
<div class="wrap">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</div>
</template> <script>
import * as echarts from 'echarts/dist/echarts.simple.min'
import mpvueEcharts from 'mpvue-echarts'
function initChart (canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
var option = {
backgroundColor: '#fff',
color: ['#37A2DA', '#67E0E3'], legend: {
data: ['A', 'B']
},
grid: {
containLabel: true
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
x: 'center',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
series: [{
name: 'A',
type: 'line',
smooth: true,
data: [18, 36, 65, 30, 78, 40, 33]
}, {
name: 'B',
type: 'line',
smooth: true,
data: [12, 50, 51, 35, 70, 30, 20]
}]
}
chart.setOption(option)
return chart
}
export default {
data () {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
},
onShareAppMessage () {}
}
</script> <style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
mpvue中引入使用echarts就是这么简单且github的仓库中大部分的demo都可以直接修改使用比较方便吧,主要是之前使用过echarts所以更改起来也非常的舒服!