我用的是vue脚手架 版本是vue2
首先下载vue
npm install --save echarts
执行这个命令
如果报错
vue中有提示
加上--force 或者 --legacy-peer-deps
main.js中配置
import * as echarts from 'echarts'Vue.prototype.$echarts = echarts最后写入代码
<template>
<div id="container">
<!--图表容器-->
<div id="newCharts" />
</div>
</template>
<script>
export default {
name: 'Example',
data() {
return {
formatter: '￥{value}'
}
},
mounted() {
this.showCharts()
},
methods: {
// 展示折线图
showCharts() {
// 基于准备好的dom，初始化echarts实例
const myChart = this.$echarts.init(document.getElementById('newCharts'))// 也可以通过$refs.newCharts的方式去获取到dom实例。
// 绘制图表
myChart.setOption({
title: { text: '在vue中使用echarts绘制图表' }, // 图标的标题
// X轴
xAxis: {
type: 'category', // 坐标轴类型,类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据
// 坐标轴刻度相关设置
axisTick: {
alignWithLabel: true// 为true时，可以让刻度跟底部的标签内容对齐
},
data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], // X轴的刻度数据
name: '时间', // 坐标轴名称
nameLocation: 'start', // 坐标轴名称显示位置
// 坐标轴名称的文字样式
nameTextStyle: {
align: 'center', // 文字水平对齐方式，默认自动
verticalAlign: 'top', // 文字垂直对齐方式，默认自动
lineHeight: 28, // 行高
fontSize: 10, // 字体大小
color: 'rgba(0, 0, 0, 1)'// 字体颜色
},
// 坐标轴刻度标签的相关设置
axisLabel: {
interval: 'auto'// 坐标轴刻度标签的显示间隔，在类目轴中有效。可以设置成 0 强制显示所有标签,如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示『隔两个标签显示一个标签』，以此类推。
}
},
// Y轴
yAxis: {
type: 'value', // 坐标轴类型,'value' 数值轴，适用于连续数据
// 坐标轴刻度标签的相关设置
axisLabel: {
formatter: this.formatter// 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。简单讲就是可以自己格式化标签的内容。
}
},
// 直角坐标系内绘图网格,简单理解指的就是这个折线图。
grid: {
left: 50// grid 组件离容器左侧的距离
},
// 数据
series: [
{
data: [155, 45, 87, 123, 89, 116, 173], // 折线图要展示的数据
type: 'line'// 数据以什么样的类型展示。line为折线图
}
]
})
}
}
}
</script>
<style lang="scss" scoped>
#container {
width: 100%;
height: 100vh;
padding-top: 100px;
#newCharts{
margin: 0 auto;
width: 800px;
height: 800px;
}
}
</style>效果展示
