vue_Eacharts学习
一个基于 JavaScript 的开源可视化图表库
NPM 安装 ECharts
使用npm
命令行进行安装
npm install echarts --save
引入 ECharts
在vue中导入所有的ECharts的组件
import * as echarts from 'echarts';
这里的template
模板里面的div是ECharts的基本样式,也可以修改, script中的代码是数据内容, 从methods
方法中 里面有一个option,
只需要修改这个后面的内容,就可以修改图标的样式以及内容,很是方便.
<template>
<div
class="echart"
ref="mychart"
id="mychart"
:style="{ float: 'left', width: '100%', height: '400px' }"
></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
name: "张雪",
xData: ["2020-02", "2020-03", "2020-04", "2020-05"], //横坐标数据
yData: [30, 132, 80, 134] //纵坐标数据,与横坐标对应
};
},
mounted() {
this.initEcharts();
},
methods: {
initEcharts() {
const option = {
title: {
text: "ECharts 入门示例"
},
tooltip: {},
legend: {
data: ["销量"]
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [
{
name: "销量",
type: "bar", //类型为柱状图
data: [5, 20, 36, 10, 10, 20]
}
]
};
const myChart = echarts.init(this.$refs.mychart);// 图标初始化
myChart.setOption(option);// 渲染页面
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
}
}
};
</script>
总结:如果我们需要使用哪个图标的样式,就可以去那里找对应的样式,进行添加