在vue中echarts的简单使用
1.先npm安装
$ npm install echarts --save
2.在vue中全局引用
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.在项目中就可以直接使用echarts了
想屏幕适配一定要在div容器中把宽度改成100%
//1.先创建一个div容器,我用的是ref,可以用id去获取容器
<template>
<div class="echart">
<div ref="chart1" id="main" style="width: 100%;height:400px;"></div>
</div>
</template>
<script>
// import echarts from "echarts"; // 全局引入不行,可以试试局部引入
let myChart5 = null;
// let chart = null
export default {
mounted() {
//获取div容器
let chart1 = this.$refs.chart1;
myChart5 = this.$echarts.init(chart1);
//监听窗口的变化,不想屏幕自适应可以不写
window.addEventListener("resize", function() {
myChart5.resize();
});
// 调用echarts图
this.drawLine();
},
methods: {
drawLine() {
// var myChart = echarts.init(document.getElementById("main"));//使用id获取的(想用id或者ref获取容器都可以)
var option = {//前面一定要写变量
color: ["#3398DB"],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [ // X轴
{
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisTick: {
alignWithLabel: true,
},
},
],
yAxis: [ // Y轴
{
type: "value",
},
],
series: [
{
name: "直接访问",
type: "bar",
barWidth: "60%",
data: [10, 52, 200, 334, 390, 330, 220], // 柱状图的数据
},
],
};
// 使用刚指定的配置项和数据显示图表。
//防止越界,重绘canvas
window.onresize = myChart5.resize;
myChart5.setOption(option);
},
},
};
</script>
示例图