1、安装echarts依赖
npm install echarts -S或
cnpm install echarts -S//（这个是针对配置了淘宝镜像的安装方法）
2、引入echarts
有两种引入方式，全局引入和局部引入；
全局引入：
在main.js中
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
局部引入：
在你需要用到echarts绘图的组件中进行引入；
const echarts = require("echarts");
在这里我使用的是局部引入的方式；
3、制作折线图
<template>
<div id="app">
<!-- 2、为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main"
style="width: 600px;height:400px;backgroundColor:#ccc;"></div>
</div>
</template>
<script>
// 1、导入echarts
const echarts = require("echarts");
export default {
name: "App",
data () {
return {};
},
created () { },
mounted () {
// 3、基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 4、指定图表的配置项和数据
let xDate = ["2021年12月13日", "2021年12月20日", "2021年12月27日", "2021年01月03日", "2021年01月13日", "2021年12月10日", "2021年01月17日", "2021年01月24日"];
let yData1 = [5695, 5780, 5812, 5906, 6001, 6100, 6218, 6329];
var option = {
title: {
textStyle: {
color: "#fff"
},
text: "永辉超市在红米note7手机型号上的下载量变化"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999"
}
}
},
legend: {
left: "60%",
top: "30px",
data: ["下载量"]
},
xAxis: [
{
// type: "category",
data: xDate,
axisLabel: { interval: 0, rotate: 45 },
}
],
yAxis: [
{
type: "value",
show: true,
axisLabel: {
formatter: "{value}"
}
},
{
type: "value",
axisLine: { onZero: false },
show: true,
min: 0,
max: 4,
interval: 1,
axisLabel: {
formatter: "{value}"
}
}
],
series: [
{
name: "下载量",
type: "line",
yAxisIndex: 0,
label: {//设置每一项在柱子的上方显示数值
show: true,
position: 'top'
},
data: yData1
},
]
};
// 5、使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.off("click");
myChart.on('click', function (params) {//用于做每个点的监听，只用点击点才能够获取想要的监听效果；
let data = {
x: params.name,
y: params.value
}
console.log(data)
alert(JSON.stringify(data))
});
},
methods: {}
};
</script>
<style>
</style>
