小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
快速上手Vue中使用echarts插件
第一步：安装echarts
我是用npm获取的，当然你也可以用其他方式获取也是没有问题的，官网获取方法有好几种
npm install echarts --save
官网链接地址：
https://echarts.apache.org/handbook/zh/basics/download
第二步：在Vue 项目中引入Echarts
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts
引入一般是在项目的
main.js文件中引入的
第三步： 搭建基础的HTML页面
<template>
<div id="main"></div>
</template>
<script>
export default {
data () {
return {
// 标题：text 标题背景颜色：backgroundColor
title: { text: '网店销售业绩汇总', backgroundColor: 'yellow' },
legendData1: [{
name: '秋季',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
}
}, {
name: '冬季',
// icon 不设置默认为长方形。
icon: '',
// 设置文本为红色
textStyle: {
color: 'blue'
}
}],
xAxisData1: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
series1: {
name: '秋季',
type: 'bar',
data: [115, 110, 140, 130, 150, 160]
},
series2: {
name: '冬季',
type: 'bar',
data: [15, 120, 180, 140, 110, 170]
}
}
},
mounted () {
var myChart = this.$echarts.init(document.getElementById('main'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption({
title: this.title,
tooltip: {},
// 系列列表颜色
color: [
'lightpink', 'lightgreen'
],
// 图例
legend: {
data: this.legendData1
},
// 配置要在 X 轴显示的项。
xAxis: {
data: this.xAxisData1
},
// 配置要在 Y 轴显示的项。
yAxis: {
},
// 系列列表，每个系列通过 type 决定自己的图表类型
series: [
this.series1,
this.series2
],
});
},
methods: {
}
}
</script>
<style lang="scss" scoped>
#main {
width: 600px;
height: 400px;
margin: 0 auto;
}
</style>
此处只是使用了echarts配置基础语法中的一丢丢，详情全解请参照官网
第四步：来看效果图
经过三个步骤的操作，咱们这最简单的一个echarts图表已经搭建完成了，接下来看一下运行效果图。
一个简单的柱状图就这么就完成了。
总结：本文只是做了一个简单的小demo，有兴趣的掘友们可以自己去官网查看详细讲解
再唠叨一句：掘金的第一篇文章，很高兴认识大家。
