安装
mpvue-echarts的github地址
https://github.com/F-loat/mpvue-echarts
代码语言：javascript复制$ cnpm install mpvue-echarts
$ cnpm install echarts DEMO
复制粘贴后即可看到效果
代码语言：javascript复制<!--
* @Author: wangyang
* @LastEditors: wangyang
* @Description: file content
* @Date: 2019-04-08 16:34:52
* @LastEditTime: 2019-04-08 18:57:44
-->
<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: 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]
},
{
name: '正面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true
}
},
data: [120, 102, 141, 174, 190, 250, 220]
},
{
name: '负面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'left'
}
},
data: [-20, -32, -21, -34, -90, -130, -110]
}
]
}
}
function getScatterOption () {
var data = []
var data2 = []
for (var i = 0; i < 10; i ) {
data.push(
[
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 40)
]
)
data2.push(
[
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100)
]
)
}
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: 100,
inRange: {
symbolSize: [20, 70]
}
},
series: [{
type: 'scatter',
name: 'aaaa',
data: data
},
{
name: 'bbbb',
type: 'scatter',
data: data2
}
],
animationDelay: function (idx) {
return idx * 50
},
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: 100%;
height: 400px;
}
</style>效果图
折线图
代码语言：javascript复制<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所以更改起来也非常的舒服!
