目录
使用思路：
Echarts在vue中使用
引入 ECharts
绘制图表实例（复杂）
实例效果：
官方入门实例（简单）
官方入门实例效果
编辑
图表自适应
ECharts 的功能十分强大,可以生成多种形式的图表,配置项十分灵活,可以根据实际需求自由定制
官方文档: https://www.echartsjs.com/examples/
使用思路：
问题 + 浏览器搜索 + 官方配置项手册对应字段查找 = 结果
当我们绘制图表时总是会需要自己配置一些样式效果，而官方API又难以查找，新手可以将想要查找的效果样式在浏览器中搜索，根据搜索结果的提示去设置或再去官方配置项手册搜索查找对应项配置。
Echarts在vue中使用
首先在项目中安装Echarts
npm install echarts --save引入 ECharts
全局引入
- main.js
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts 所需组件单个引入
import * as echarts from "echarts";绘制图表实例（复杂）
<template>
<div class="conentTop">
<div id="pieChart" :style="{ width: '49%', height: '100%' }"></div>
<div id="barChart" :style="{ width: '49%', height: '100%' }"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: 'topEcharts',
data() {
return {
}
},
mounted() { // 挂载后获取Dom渲染图表
this.drawLine();
this.drawLineTow();
},
methods: {
// 饼图
drawLine() {
// 基于准备好的dom，初始化echarts实例
let pieChart = echarts.init(document.getElementById('pieChart'))
// 绘制饼状图表
pieChart.setOption({
title: {
text: '问题类型',
left: 'left'
},
series: [
{
type: 'pie',
showEmptyCircle: false,//是否显示占位圆
data: [
{
value: 8,
name: '延误较大',
},
{
value: 14,
name: '失衡'
},
{
value: 16,
name: '校时异常'
},
{
value: 20,
name: '空放'
},
{
value: 24,
name: '拥堵',
},
],
radius: ['18%', '70%'],
roseType: 'area',
label: { //饼图上显示数值
show: true,//数据为空时仍开启显示
// position: 'top',//在上方显示
textStyle: {//数值公共样式
lineHeight: 24,
},
//数据名b 数据值c 百分比d {name}{time}表示为数值设置的类名 \n、\t为字符串转义符
formatter: "{name|{b}}\n {time|{c}\t({d}%)}",
rich: {//单独设置类样式
name: {
fontSize: 14,
fontWeight: 'bold',
color: '#000000',
},
time: {
fontSize: 12,
color: '#2F4683',
fontWeight: 'bold',
}
},
}
},
// 背景圆设置
{
type: 'pie',
radius: [20, 126],
emptyCircleStyle: {
color: '#EDE8FE'
}
}
]
});
window.addEventListener("resize", () => {
pieChart.resize();
});
},
// 柱形图
drawLineTow() {
// 基于准备好的dom，初始化echarts实例
let barChart = echarts.init(document.getElementById('barChart'));
// 绘制图表
barChart.setOption({
title: {
text: '问题趋势',
left: 'left',
top: 'top',
},
tooltip: {},//悬浮提示
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#FCDB00FF' }, // 设置颜色渐变
{ offset: 1, color: '#F7B500FF' }
]
},
],
xAxis: {
// type:'time',
// name:'x轴标题',
axisTick: {
show: false, //隐藏x轴刻度轴线
},
axisLine: {
lineStyle: {
color: "#638DFF7A"//x轴轴线颜色
}
},
data: ["2022-12-01", "2022-12-02", "2022-12-03", "2022-12-04", "2022-12-05", "2022-12-06", "2022-12-07"],
},
yAxis: {
type: 'value',
axisLine: {//y轴样式
show: true,//显示y轴线条
lineStyle: {
color: "#638DFF7A"//y轴轴线颜色
}
},
splitLine: { //y轴分割线样式
// show: true, // 默认值
lineStyle: {
type: "dashed", //虚线
color: "#638DFF7A"
}
},
},
series: [
{
type: 'bar',
barWidth: 30,
data: [41, 58, 68, 100, 31, 39, 29],
}
],
});
// 图表自适应
window.addEventListener("resize", () => {
barChart.resize();
});
},
}
}
</script>
<style scoped>
.conentTop {
width: 100%;
height: 409px;
box-sizing: border-box;
display: flex;
justify-content: space-around;
align-items: center;
padding: 20px 0 16px 0;
}
#pieChart,
#barChart {
box-sizing: border-box;
padding-left: 23px;
padding-top: 13px;
background-color: #fff;
}
</style>实例效果：
若感觉上方实例太复杂可看下官方入门实例
官方入门实例（简单）
<template>
<div>
<div id="myChart" :style="{ width: '600px', height: '300px' }"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: 'hello',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
}
}
}
</script>
官方入门实例效果
图表自适应
实现图表自适应可使用一些百分比、rem、em、vh、vw等相对单位设置图表宽高。
并且结合官方resize方法即可。
官方方法
window.addEventListener("resize", () => {
pieChart.resize(); // 图表实例变量名：pieChart
});
