全部集合案例:
![](https://i-blog.csdnimg.cn/blog_migrate/8da345854e252e6689cbdf663870276d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fbd11e9f7e20d9083a4481c64256c57c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3183d01f800e4375fe64b12be38af1f8.png)
一、折线图
![](https://i-blog.csdnimg.cn/blog_migrate/695db0992c0377829ded21db13751cdb.png)
完整代码:
<div id="main"></div>
const echarts = require("echarts");
data(){
myChart: null,
}
mounted() {
this.echartsInit();
window.addEventListener("resize", () => {
this.myChart.resize();
});
},
methods: {
echartsInit() {
var chartDom = document.getElementById("main");
this.myChart = echarts.init(chartDom);
var option;
option = {
// title: {
// text: "Stacked Line",
// },
tooltip: {
trigger: "axis",
},
legend: {
data: ["农产品", "农资"],
padding: [18, 0, 0, 0],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: [
"2022-01",
"2022-02",
"2022-03",
"2022-04",
"2022-05",
"2022-06",
"2022-07",
],
},
yAxis: [
{
type: "value",
name: "零售额/亿元", //顶端的文本描述
show: true,
min: 0,
max: 500,
},
{
type: "value",
name: "零售量/亿件", //顶端的文本描述
show: true,
min: 0,
max: 10000,
},
],
series: [
{
name: "农产品",
type: "line",
stack: "Total",
smooth: true,
color: "#2E90FA",
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: "农资",
type: "line",
yAxisIndex: 1,
stack: "Total",
smooth: true,
color: "#15B79E",
data: [220, 182, 191, 234, 290, 3600, 310],
},
],
};
option && this.myChart.setOption(option);
},
},
![](https://i-blog.csdnimg.cn/blog_migrate/49a7ae633964225d48d2e67a8793a94d.png)
完整代码:
<template>
<div id="mains"></div>
</template>
<script>
const echarts = require("echarts");
export default {
data() {
return {
myChart: null,
};
},
mounted() {
this.initCharts();
window.addEventListener("resize", () => {
this.initCharts();
});
},
methods: {
initCharts() {
var chartDom = document.getElementById("mains");
this.myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "1%",
right: "4%",
bottom: "3%",
top: "4%",
containLabel: true,
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
axisLabel: {
show: false,
},
splitLine: {
lineStyle: {
type: "dashed", //虚线
color:'#f2f3f5'
},
},
},
yAxis: {
type: "category",
boundaryGap: false,
axisTick: {
length: 0, // 竖线的长度
},
axisLine: {
lineStyle: {
type: "solid",
color: "#cbd0d9", // 更改坐标轴颜色
},
},
axisLabel: { color: "#667085" },
data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
},
series: [
{
name: "2011",
type: "bar",
barWidth: 18,
label: {
position: "right",
show: true,
fontSize: "12px",
formatter: "{c}%",
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "#2EBDFA" },
{ offset: 1, color: "#2E90FA" },
]),
// 柱形图圆角,初始化效果
barBorderRadius: [0, 40, 40, 0],
},
},
data: [18203, 23489, 29034, 104970, 131744, 630230],
},
],
};
option && this.myChart.setOption(option);
},
},
};
</script>
<style lang="scss">
#main {
width: 100%;
height: 100%;
}
</style>
![](https://i-blog.csdnimg.cn/blog_migrate/920e6cc64ebf8ef804de3d439543bf22.png)
完整代码:
<template>
<div class="onepie assembly">
<div id="pie-main"></div>
</div>
</template>
<script>
const echarts = require("echarts");
export default {
data() {
return {
pieMyChart: null,
};
},
mounted() {
this.initEcharts();
window.addEventListener("resize", () => {
this.initEcharts();
});
},
methods: {
initEcharts() {
const dataList = [
{ value: 1048, name: "餐饮服务" },
{ value: 735, name: "服务/虚拟" },
{ value: 580, name: "旅游服务" },
{ value: 484, name: "拍卖服务" },
];
var chartDom = document.getElementById("pie-main");
this.pieMyChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: "item",
},
legend: {
orient: "vertical",
itemWidth: 4,
itemHeight: 28,
itemGap: 20,
textStyle: {
color: "#667085",
fontSize: "14px",
padding: [0, 0, 40, 20],
},
right: "50",
top: "70",
formatter: function (name) {
let arr
for (let i = 0; i < dataList.length; i++) {
if (name === dataList[i].name) {
arr = name +'\u0020\u0020\u0020\u0020'+ dataList[i].value + "%";
}
}
return arr;
},
},
series: [
{
name: "Access From",
type: "pie",
radius: ["57%", "70%"],
center: ["35%", "40%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: "餐饮服务" },
{ value: 735, name: "服务/虚拟" },
{ value: 580, name: "旅游服务" },
{ value: 484, name: "拍卖服务" },
],
},
],
};
option && this.pieMyChart.setOption(option);
},
},
};
</script>
<style lang="scss">
.onepie {
height: 416px;
#pie-main {
width: 100%;
height: 100%;
}
}
</style>