效果图
安装
npm install echarts
在所需要的页面中引入
<template>
<div class="chart-container" :id="id"></div>
</template>
<script>
import * as echarts from "echarts"; // 引入ECharts库
export default {
name: "echarts",
data() {
return {
chart: null,
};
},
props: {
// chart类型 line折线图 bar柱状图 Pie饼状图
chartType: {
type: String,
default: () => {
return "line";
},
},
id: {
type: String,
default: () => {
return "charts2";
},
}
},
watch: {
chartType: {
handler(newVal, oldVal) {
this.$nextTick(() => {
this.initChartLine();
});
},
deep: true,
immediate: true,
},
},
mounted() {
// initChartLine();
},
methods: {
// 折线图
initChartLine() {
this.chart = echarts.init(document.getElementById(this.id));
const option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#778FA3",
},
},
},
// toolbox: {
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ["line", "bar"] },
// restore: { show: true },
// saveAsImage: { show: true },
// },
// },
grid: {
left: "10%", // 距离左边的距离
right: "10%", // 距离右边的距离
top: "23%", // 距离顶部的距离
bottom: "10%", // 距离底部的距离
},
legend: {
data: ["占比", "数量"],
left: "right",
top: "top",
textStyle: {
color: "#fff",
fontSize: "16px",
},
},
xAxis: [
{
type: "category",
data: ["种类一", "种类二", "种类三", "种类四", "种类五"],
axisPointer: {
type: "shadow",
},
axisLabel: {
//x轴文字的配置
color: "#C3D5E9", //Y轴内容文字颜色
interval: "auto", // 可以设置为具体的数字，如 5，表示显示每隔 5 个标签
},
},
],
yAxis: [
{
type: "value",
// name: "Precipitation",
min: 0,
max: 500,
// interval: 50,
axisLabel: {
// formatter: "{value} ml",
formatter: "{value}",
color: "#C3D5E9", //Y轴内容文字颜色
},
axisLine: { //y轴线的配置
show: false, //是否展示
},
// 横向分割线
splitLine: {
show: true, // 显示分割线。
lineStyle: {
// 分割线样式。
color: '#032B50', // 分割线颜色。
type: 'dotted' // 分割线类型。 solid实线 dotted点型虚线 dashed线性虚线
}
},
},
{
type: "value",
// name: "Temperature",
min: 0,
max: 100,
// interval: 5,
axisLabel: {
formatter: "{value} %",
color: "#C3D5E9", //Y轴内容文字颜色
},
axisLine: { //y轴线的配置
show: false, //是否展示
},
// 横向分割线
splitLine: {
show: true, // 显示分割线。
lineStyle: {
// 分割线样式。
color: '#1A2C3B', // 分割线颜色。
type: 'dashed' // 分割线类型。 solid实线 dotted点型虚线 dashed线性虚线
}
},
},
],
series: [
{
name: "数量",
barMinHeight: 10,
type: "pictorialBar",
barCategoryGap: "60%",
// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
symbol:
"path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
itemStyle: {
normal: {
//barBorderRadius: 5,
//渐变色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#01EAED",
},
{
offset: 0.5,
color: "#02C4DD",
},
{
offset: 1,
color: "#029ED9",
},
]),
},
},
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#fff",
fontSize: 16,
},
},
},
data: [268, 189, 356, 245, 213],
z: 10,
},
// {
// name: "hill",
// type: "bar",
// barWidth: "20%",
// symbol:
// "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
// itemStyle: {
// normal: {
// color: "rgba(11,47,68,.8)",
// },
// },
// // data: [100, 100, 100, 100, 100, 100, 100],
// z: 9,
// },
{
name: "占比",
type: "line",
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + " %";
},
},
// 折线颜色
lineStyle: {
color: "#FE9900",
width: 2,
},
color: "#FE9900", //拐点颜色
symbol: 'circle', // 设置拐点形状、
symbolSize: 2, // 设置拐点大小
data: [58, 42, 65, 45, 38],
},
],
};
this.chart.setOption(option);
},
},
};
</script>
<style scoped lang="scss">
.chart-container {
width: 100%;
height: 100%;
}
</style>
在页面中使用
<template>
<echarts-line-tower id="echartLineTower1" />
</template>
<script>
import echartsLineTower from './components/data/echartsLineTower.vue';
export default {
name: "Charts",
data () {
return {
}
},
components: {
'echarts-line-tower': echartsLineTower
},
};
</script>
