Echarts官网： https://echarts.baidu.com/index.html
一、npm安装Echarts
npm install echarts -S二.引入Echarts
方法一：全局引入
打开main.js文件引入Echarts
import echarts from 'echarts'Vue.prototype.$echarts = echarts 方法二：局部引入
全局引入会将所有的echarts图表打包，导致体积过大，所以我觉得最好还是按需要来局部引入，比如我们需要引入一个柱状图
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')这里require直接从 node_modules 中查找文件位置进行引入
三.创建图表
当你安装完插件和在页面里面引入图表之后，那么恭喜你可以创建图表了~
第一步：你首先得创造一个图表的容器，宽高必须是行内样式，单位必须是px，附上完整代码如下：
<template>
<div class="MyAchievement">
<div class="MyAchievement-echart">
<div class="echart-title">我的业绩</div>
<div class="echart-content">
<div id="myChart" :style="{width: '1500px', height: '460px'}"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
var myChart = this.$echarts.init(document.getElementById("myChart")); //获取容器元素
var option = {
tooltip: {
trigger: "axis" },
grid: { left: "6%",
right: "6%",
bottom: "6%",
containLabel: true },
//1、左上角图例处
legend: {
data: ["订单数量", "我的业绩"],
left: "6%", //标题位置
top: "top",
itemWidth: 15, //图例图标的宽
itemHeight: 15, //图例图标的高
textStyle: {
color: "#3a6186",
fontSize: 20
}
},
//2、右上角切换图形处
toolbox: {
show: true,
feature: {
magicType: { show: true, type: ["line", "bar"] }//柱形图和折线图切换
},
right: "6%"//离右边的距离
},
calculable: true,
//3、中部图表X轴修改
xAxis: [ {
type: "category",
//x轴的数据
data: [ "01-01", "01-02", "01-03", "01-04", "01-05", "01-06", "01-07" ],
splitLine: { show: false }, //去除网格分割线
// splitArea: {show: true},//保留网格区域
axisTick: {
//刻度
show: false //不显示刻度线
},
axisLine: {
//坐标线
lineStyle: {
type: "solid",
color: "#e7e7e7", //轴线的颜色
width: "2" //坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: "#3a6186" //坐标值的具体的颜色
}
},
splitLine: {
show: false //去掉分割线
}
}
],
//4、中部图表Y轴修改
yAxis: [
{
name: '单位：次',//轴的名字，默认位置在y轴上方显示,也可不写
max: 30,//最大刻度
type: "value",
axisLine: {
//线
show: false
},
axisTick: {
//刻度
show: false
},
axisLabel: {
textStyle: {
color: "#3a6186" //坐标值的具体的颜色
}
},
splitLine: {
lineStyle: {
color: ["#e7e7e7"] //分割线的颜色
}
}
}
],
//5、柱状图形修改
series: [
{
name: "订单数量",
type: "bar",
barWidth: 20,
data: [20, 35, 55, 60, 120, 150, 140],
itemStyle: {
normal: {
color: "#00abf7", //设置柱子颜色
label: {
show: true, //柱子上显示值
position: "top", //值在柱子上方显示
textStyle: {
color: "#00abf7", //值的颜色
fontSize: 16
}
} }
}
},
{
name: "我的业绩",
type: "bar",
barWidth: 20,//设置柱子宽度，单位为px
data: [40, 50, 90, 110, 130, 160, 150],
itemStyle: {
normal: {
color: "#ff4f76", //设置柱子颜色
label: {
show: true, //柱子上显示值
position: "top", //值在柱子上方显示
textStyle: {
color: "#ff4f76", //值的颜色
fontSize: 16
} } } } } ] };
//防止越界，重绘canvas
window.onresize = myChart.resize;
myChart.setOption(option); //设置option
}
}};
</script>
<style scoped>
.MyAchievement {
display: flex;
flex-direction: column;
padding: 0px 90px;
}
.MyAchievement .MyAchievement-echart {
width: 100%;
height: 570px;
border-radius: 10px;
border: 1px solid #d3d9e9;
box-shadow: 4px 6px 10px -2px #d3d9e9;
background-color: #fff;
display: flex;
flex-direction: column;
}
.MyAchievement-echart .echart-title {
width: 100%;
height: 70px;
background-color: #00abf7;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-size: 26px;
color: #fff;
text-align: center;
line-height: 75px;
}
.MyAchievement-echart .echart-content {
width: 100%;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.echart-content #myChart {
margin-top: 35px;
}
</style>效果图如下：
然后我们需要把之前图表方法里面的死数据数据为 data: [20, 35, 55, 60, 120, 150, 140],替换成接口数据，这里需要注意，我们调用之后发现我们取到的数据为空，是因为我们图表调用方法写在了mounted里面了，我们需要把方法移至到接口成功方法里面：
axios({
method:'POST',
url:this.API.drawline,
}).then(response => {
//成功调用图表方法
this.drawLine();
}).catch(err => {
console.log(err);
})