npm install echarts vue-echarts
在main.js中引入和注册组件
import VueEcharts from 'vue-echarts'
Vue.component('v-echart', VueEcharts)
使用刚注册的v-echart组件
<template>
<v-echart :option="data"></v-echart>
</template>
<script>
export default {
name: 'SalesView',
data () {
return {
// 这个data里面包含了所有option的选项
data: {
xAxis: {
type: 'category'
},
yAxis: {
},
series: {
type: 'line',
data: [100, 200, 300]
}
}
}
}
}
</script>
<style lang="scss" scoped>
.echarts{
width:100%;
height: 100%;
}
</style>
项目中完整运用示例：
1.和上面一样下载，安装，引入，注册。
2.新建项目全局样式文件，style/index.css,
.echarts{
width: 100%;
height: 100%;
}
/* 就不用给每个组件内的echarts单独设置宽高了 */
- 在一个组件中使用v-echart组件
<template>
<div>
<common-card title="累计订单量" value="3157,420">
<template>
<v-echart :option="getOptions()"></v-echart>
</template>
<template v-slot:footer>
<span>昨日订单量</span>
<span class="emphasis"> 2000,000</span>
</template>
</common-card>
</div>
</template>
<script>
import commonCardMixin from '../../mixins/commonCardMixin.js'
export default {
name: 'TotalOrders',
mixins: [commonCardMixin],
methods: {
// 定义图表信息动态传入的方法
getOptions () {
return {
// x轴
xAxis: {
// type: 'value', 默认是value,直线图
type: 'category', // 就变成折现图了
show: false, // 隐藏x轴
boundaryGap: false // 把默认的距离两侧x轴的边距取消
},
// y轴
yAxis: {
show: false // 隐藏Y轴
},
// 系列对应图表，一个系列就是一张图。
series: [
{
// 渲染折线图
type: 'line',
// 通过data指定绘图数据
data: [620, 432, 220, 534, 790, 240, 580],
areaStyle: {
color: 'purple' // 设置面积区域样式，将面积区域颜色设置为紫色
},
smooth: true, // 让图表更加平滑的展示
lineStyle: {
// 设置线的样式
width: 0 // 线就没了
},
itemStyle: {
// 设置每个点的样式
opacity: 0 // 点就不显示了
}
}
],
grid: {
// 布局
top: 0,
bottom: 0,
right: 0,
left: 0
}
}
}
}
}
</script>
<style>
</style>
>
空心饼图
<v-echart :option="categoryOptions"></v-echart>
methods {
renderPieChart () {
// 直接在mockData中加入itemStyle修改颜色
const mockData = [
{
legendname: '粉面粥店',
value: 97,
percent: '22.30%',
itemStyle: {
color: '#5085f2'
},
name: '粉面粥店 | 22.30% '
},
{
legendname: '汉堡披萨',
value: 92,
percent: '21.15%',
itemStyle: {
color: '#e7e702 '
},
name: '汉堡披萨 | 21.15% '
},
{
legendname: '烧烤小吃',
value: 66,
percent: '38.6%',
itemStyle: {
color: '#8d7fec'
},
name: '烧烤小吃 | 38.6% '
}, {
legendname: '紫菜蛋汤',
value: 22,
percent: '15.8%',
itemStyle: {
color: 'pink'
},
name: '紫菜蛋汤 | 15.8% '
},
{
legendname: '包子烧卖',
value: 45,
percent: '22.30%',
itemStyle: {
color: 'green'
},
name: '包子烧卖 | 22.30% '
}
]
this.categoryOptions = {
// 有两个标题，所以给title设为数组
title: [
{
text: '品类分布',
textStyle: {
fontSize: 14,
color: '#666'
},
left: 20,
top: 20
}, {
text: '累计订单量',
// subtext是副标题
subtext: '320',
// 调位置到圆环中间
x: '34.5%',
y: '42.5%',
textAlign: 'center',
textStyle: {
fontSize: 14,
color: '#999'
},
subtextStyle: {
fontSize: 28,
color: '#333'
}
}
],
// 饼图不需要坐标系，直接写series
// series也是个数组
series: [
{
type: 'pie',
data: mockData,
// 设置饼图的伸出的小线条的对应文字
label: {
normal: {
show: true,
// position: 'outter'，就是把每个饼对应的文字放在饼外面
// position: 'inner',就是把每个饼对应的文字放在饼里
formatter: function (params) {
return `${params.data.legendname} | ${params.data.percent}`
// return出去就显示了每个饼对应的文字
}
}
},
// center定义圆心位置,使得饼图位移
center: ['35%', '50%'],
// 设置radius让饼图变成空心图,前后数值是内圈半径,外圈半径
radius: ['45%', '60%'],
// labelLine设置饼图伸出来的线
labelLine: {
normal: {
length: 5, // 靠近饼图的线是length
length2: 2, // 靠近文字的线是length2
// 让线平滑
smooth: true
}
},
// false就是让饼图按照数据逆时针排序,true就是按照数据顺时针排序
clockwise: false,
// 设置每个饼之间的空白
itemStyle: {
borderWidth: 4,
borderColor: '#fff'
},
name: '品类分布'
}
],
// legend是旁边的彩色小方框,点击可以隐藏对应的饼,需要每个饼的对应数据中有name属性
legend: {
// 小方块可以滑动
type: 'scroll',
// 垂直排列
orient: 'vertical',
// 可以指定高度,小方块排不下会出现箭头
height: 250,
left: '70%',
top: 'middle',
textStyle: {
color: '#8c8c8c'
}
},
// tooltip是组件,就是鼠标移动到饼上面的弹层
tooltip: {
trigger: 'item', // 默认值,表示鼠标移到item上会触发
// 可以自定义tooltip组件里面的内容
formatter: function (params) {
console.log(params)
const str = params.seriesName + '<br />' +
params.marker + params.data.legendname + '<br />' +
'数量：' + params.data.value + '<br />' +
'占比：' + params.data.percent + '%'
return str
}
}
}
}
},
mounted () {
this.renderPieChart()
}
地图
可以看慕课网的笔记 www.youbaobao.xyz/datav-docs/…
