Step 1: Download echarts
npm install echarts --save
Step 2: Introduce main.js in the project
import echarts from 'echarts'
Vue.prototype.$echarts = echorts
Step 3: Use in the component
write in template tag
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
in the script tag
export default {
name: 'test',
data(){
return{
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'),'light')
// 绘制图表
myChart.setOption({
title: { text: '这里是表格的标题,自带加粗' },
tooltip: {},
// 图标中x轴的内容
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
// 图标中y轴的内容
yAxis: {},
// 数据
series: [
{ name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
}
}
}
Note: We want to instantiate the echarts object in the mounted lifecycle function. Because we want to make sure that the dom element has been mounted in the page
This is the desired requirement
The x-axis of the chart shows 5 years when the year is clicked. The x-axis of the chart shows 12 months when you click on the month. A week is displayed by default.
Since the background directly returns me an array
code show as below
Reprinted in: https://www.cnblogs.com/JiAyInNnNn/p/11049645.html