1.安装npm install echarts --save
2.在main.js中引入
2.1 import echarts from ‘echarts’
2.2 挂载到vue原型上
Vue.prototype.$echarts = echarts
3.上代码实现一个柱状图(改成折线图只需将type改成line)
<template>
<div>
<div id="main" style="width: 600px;height:400px;">
</div>
</div>
</template>
<script>
export default {
data () {
return {
option: {
title: { // 图表标题
text: '柱状图', // 图表标题文本
x: '400px' // 改变标题在x轴的位置
},
tooltip: {}, // 提示框组件
legend: {
data: ['销量']
},
grid: { // 在该属性下可以设置图标的大小,相对于dom节点(该组件中id为main的div)的位置
right: 0,
top: 30,
width: '50%',
height: '60%'
},
xAxis: { // 直角坐标系 X 轴
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] // 横轴数据
},
yAxis: {}, // 直角坐标系 Y 轴
series: [{
name: '销量',
type: 'bar', // 图表类型line(折线图)、bar(柱状图)、pie(饼图)、scatter(散点图)、graph(关系图)、tree(树图)
data: [5, 20, 36, 10, 10, 20] // 纵轴数据
}]
}
}
},
mounted () {
const myChart = this.$echarts.init(document.getElementById('main'))
myChart.setOption(this.option)
}
}
</script>
<style>
</style>
上代码实现一个饼状图
<template>
<div>
<div id="main" style="width: 600px;height:400px;">
</div>
</div>
</template>
<script>
export default {
data () {
return {
option: {
series: [
{
name: '访问来源',
type: 'pie', // 图标类型为饼状图
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'], // 也可以改变图标颜色
radius: '50%', // 图表大小占dom节点的百分比
roseType: 'angle', // 设置为南丁格尔图
labelLine: { // 设置视觉引导线颜色
lineStyle: {
color: 'rgba(0, 0, 0, 0.3)'
}
},
label: { // 设置系列文本颜色
textStyle: {
color: 'rgba(255, 0, 255, 0.3)'
}
},
itemStyle: { // 设置图标背景阴影
// color: 'skyblue', // 改变图标颜色
// 阴影的大小
shadowBlur: 400,
// 阴影水平方向上的偏移
shadowOffsetX: 0,
// 阴影垂直方向上的偏移
shadowOffsetY: 0,
// 阴影颜色
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
data: [
{ value: 635, name: '视频广告' },
{ value: 274, name: '联盟广告' },
{ value: 310, name: '邮件营销' },
{ value: 335, name: '直接访问' },
{ value: 400, name: '搜索引擎' }
]
}
]
}
}
},
mounted () {
const myChart = this.$echarts.init(document.getElementById('main'))
myChart.setOption(this.option)
}
}
</script>
<style>
</style>