菜单 搜索
首页 前端知识 Vue集成Echarts

Vue集成Echarts

2024-04-22 09:04:08 前端知识 前端哥 487 592 我要收藏

Vue集成Echarts

1、项目

1.1、创建项目

vue create vue-echarts
cd vue-echarts
npm run serve
复制

1.2、安装echarts

npm install -D echarts --save
复制

1.3、修改项目配置

vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})
复制
About.vue
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 3、设置echarts参数
        vchart.setOption({
            // 设置echarts标题
            title: {
                text: "主标题"
            },
            // 设置x轴相关参数
            xAxis: {
                data: ["EZ", "VN", "NOC", "MF"]
            },
            // 设置y轴相关参数
            yAxis: {
 
            },
            // 设置系列相关参数
            series: {
                // 图形名称
                name: "LOL英雄大全",
                // 图形类型
                type: "bar",
                // 数据
                data: [6300, 4800, 3200, 600]
            }
        })
 
    }
 
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
App.vue
<template>
  <div id="app">
    <About />
  </div>
</template>
 
<script>
import About from './views/About.vue'
 
export default {
  name: 'App',
  components: {
    About,
  }
}
</script>
<style>
</style>
复制

2、echarts

https://echarts.apache.org/zh

2.1、配置项手册

https://echarts.apache.org/zh/option.html#title.link

2.1.1、title标题组件
About.vue
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 3、设置echarts参数
        vchart.setOption({
            // 设置echarts标题
            title: {
                text: "主标题",
                // 主标题文本超链接
                link:"https://baidu.com",
                // 副标题链接
                sublink:"https://baidu.com",
                // 指定窗口打开主标题超链接；self：当前窗口打开，blank：新窗口打开；
                target:"self",
                backgroundColor:"pink",
                borderColor:"red",
                borderWidth:5,
                x:"center",
                subtext:"副标题",
                //主标题样式
                textStyle:{
                    color:"yellow",
                    fontSize:30
                },
                //副标题样式
                subtextStyle:{
                    color:"yellow",
                    fontSize:30
                }
            },
            // 设置x轴相关参数
            xAxis: {
                data: ["EZ", "VN", "NOC", "MF"]
            },
            // 设置y轴相关参数
            yAxis: {
 
            },
            // 设置系列相关参数
            series: {
                // 图形名称
                name: "LOL英雄大全",
                // 图形类型
                type: "bar",
                // 数据
                data: [6300, 4800, 3200, 600]
            }
        })
 
    }
 
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
2.1.2、tootip提示框组件

https://echarts.apache.org/zh/option.html#tooltip

About.vue
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 3、设置echarts参数
        vchart.setOption({
            // 设置echarts标题
            title: {
                text: "主标题",
                // 主标题文本超链接
                link: "https://baidu.com",
                // 副标题链接
                sublink: "https://baidu.com",
                // 指定窗口打开主标题超链接；self：当前窗口打开，blank：新窗口打开；
                target: "self",
                backgroundColor: "pink",
                borderColor: "red",
                borderWidth: 5,
                x: "center",
                subtext: "副标题",
                textStyle: {
                    color: "yellow",
                    fontSize: 30
                },
                subtextStyle: {
                    color: "yellow",
                    fontSize: 30
                }
            },
            tooltip:{
                trigger:"item",
                axisPointer:{
                    type:"line"
                },
                // 是否显示提示框浮层，默认显示
                // showContent:false,
                // 提示框浮层的文本样式
                textStyle: {
                    //   悬浮层样式
                    backgroundColor: "pink",
                    borderColor: "red",
                    borderWidth: 5,
                    color: "red"
                },
                // 自定义提示框内容
                // formatter(params){
                //     console.log(params);
                // }
            },
 
            // 设置x轴相关参数
            xAxis: {
                data: ["EZ", "VN", "NOC", "MF"]
            },
            // 设置y轴相关参数
            yAxis: {
 
            },
            // 设置系列相关参数
            series: {
                // 图形名称
                name: "LOL英雄大全",
                // 图形类型
                type: "bar",
                // 数据
                data: [6300, 4800, 3200, 600]
            }
        })
 
    }
 
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
2.1.3、legend图例组件
About.vue
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 3、设置echarts参数
        vchart.setOption({
            // 设置echarts标题
            title: {
                text: "主标题",
 
            },
            tooltip: {
 
            },
            // 图例组件
            legend: {
                // 设置图例的开启或关闭
                show: true,
                // 图例项的icon
                // icon:"circle",
                // 设置位置
                top: "10%",
                // 图例宽高
                itemWidth: 10,
                itemHeight: 20,
                textStyle: {
                    color: "red",
                    fontSize: 30,
                    backgroundColor: "yellow"
                }
            },
 
            // 设置x轴相关参数
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            // 设置y轴相关参数
            yAxis: {
 
            },
            // 设置系列相关参数
            series: {
                // 图形名称
                name: "销量",
                // 图形类型
                type: "bar",
                // 数据
                data: [5, 20, 35, 10, 10, 20]
            }
        })
 
    }
 
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
2.1.4、series系列
About.vue
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 3、设置echarts参数
        vchart.setOption({
            // 设置echarts标题
            title: {
                text: "主标题",
 
            },
            tooltip: {
 
            },
            // 图例组件
            legend: {
                // 设置图例的开启或关闭
                show: true,
                // 图例项的icon
                // icon:"circle",
                // 设置位置
                top: "10%",
                // 图例宽高
                itemWidth: 10,
                itemHeight: 20,
                textStyle: {
                    color: "red",
                    fontSize: 30,
                    backgroundColor: "yellow"
                }
            },
 
            // 设置x轴相关参数
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            // 设置y轴相关参数
            yAxis: {
 
            },
            // 设置系列相关参数
            series: {
                // 图形名称
                name: "销量",
                // 图形类型
                type: "bar",
                // 数据
                data: [5, 20, 35, 10, 10, 20],
                // 最大最小值
                markPoint: {
                    //标注的数据数组，每一项都是一个对象
                    data: [
                        {
                            type: "max",
                            name: "最大值"
                        },
                        {
                            type: "min",
                            name: "最小值"
                        }
                    ]
                },
                // 图表的标线
                markLine: {
                    data: [
                        {
                            type: "average",
                            name: "平均值"
                        }
                    ]
                }
            }
        })
 
    }
 
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
2.1.5、grid

设置图标的容器与当前内容容器的位置或样式设置。
直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。

<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        let xData = ["美食", "数码", "日化", "蔬菜", "熟食"];
        let yData = [88, 75, 20, 210, 35];
        let option = {
            xAxis: {
                data: xData,
                type: "category",
            },
            yAxis: {
                type: "value",
            },
            // 直角坐标系内绘图网格
            grid: {
                show: true,
                left: "20%",
                top: "20%",
                right: "20%",
                bottom: "20%",
                backgroundColor: "pink",
                borderColor: "yellow"
            },
            // 提示框
            tooltip: {},
            series: [
                {
                    type: "bar",
                    name: "销售",
                    data: yData,
                }
            ]
        };
 
        vchart.setOption(option);
    },
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
2.1.6、dataset
数据排序
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 配置项
        let options = {
            dataset: [
                {
                    // 数据分类
                    dimensions: ["类别", "数量"],
                    // 分类数据
                    source: [
                        ["美食", 123],
                        ["日化", 98],
                        ["熟食", 342],
                        ["数码", 267],
                        ["蔬菜", 318],
                        ["水果", 427]
                    ]
                },
                {
                    transform: {
                        // 数据排序
                        type: "sort",
                        config: {
                            // 排序字段及规则
                            dimension: "数量", order: "desc"
                        }
                    }
                }
            ],
            xAxis: {
                type: "category",
                axisLabel: {
                    // 间隔
                    interval: 0,
                    // 倾斜
                    rotate: 30,
                }
            },
            yAxis: {},
            series: [
                {
                    type: "bar",
                    encode: {
                        x: "类别",
                        y: "数量"
                    },
                    datasetIndex: 1,
                },
 
            ]
        };
        // 设置配置项
        vchart.setOption(options);
    }
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制

2.2、柱状图

About.vue
X轴为类目轴
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 3、设置echarts参数
        vchart.setOption({
            // 设置echarts标题
            title: {
                text: "主标题",
 
            },
            tooltip: {
 
            },
            // 图例组件
            legend: {
                // 设置图例的开启或关闭
                show: true,
                // 图例项的icon
                // icon:"circle",
                // 设置位置
                top: "10%",
                // 图例宽高
                itemWidth: 10,
                itemHeight: 20,
                textStyle: {
                    color: "red",
                    fontSize: 30,
                    backgroundColor: "yellow"
                }
            },
 
            // 设置x轴相关参数
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                 //坐标轴的类型，value数据轴，category 类目轴
                type:"category"
            },
            // 设置y轴相关参数
            yAxis: {
                
            },
            // 设置系列相关参数
            series: {
                // 图形名称
                name: "销量",
                // 图形类型
                type: "bar",
                // 数据
                data: [5, 20, 35, 10, 10, 20],
                // 最大最小值
                markPoint: {
                    //标注的数据数组，每一项都是一个对象
                    data: [
                        {
                            type: "max",
                            name: "最大值"
                        },
                        {
                            type: "min",
                            name: "最小值"
                        }
                    ]
                },
                // 图表的标线
                markLine: {
                    data: [
                        {
                            type: "average",
                            name: "平均值"
                        }
                    ]
                }
            }
        })
 
    }
 
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
Y轴为类目轴
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 3、设置echarts参数
        vchart.setOption({
            // 设置echarts标题
            title: {
                text: "主标题",
 
            },
            tooltip: {
 
            },
            // 图例组件
            legend: {
                // 设置图例的开启或关闭
                show: true,
                // 图例项的icon
                // icon:"circle",
                // 设置位置
                top: "10%",
                // 图例宽高
                itemWidth: 10,
                itemHeight: 20,
                textStyle: {
                    color: "red",
                    fontSize: 30,
                    backgroundColor: "yellow"
                }
            },
 
            // 设置x轴相关参数
            xAxis: {
                type: "value"
            },
            // 设置y轴相关参数
            yAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                //坐标轴的类型，value数据轴，category 类目轴
                type: "category"
            },
            // 设置系列相关参数
            series: {
                // 图形名称
                name: "销量",
                // 图形类型
                type: "bar",
                // 数据
                data: [5, 20, 35, 10, 10, 20],
                // 设置轴的宽度
                barWidth: 20,
                // 设置轴的统一颜色
                // color:"pink",
                // 单独设置每个轴的颜色
                itemStyle: {
                    normal: {
                        color: function (params) {
                            let colorList = ["#c23531", "#2f4554", "#61a0a8", "#91c7ae"]
                            return colorList[params.dataIndex]
                        }
                    }
                },
                // 最大最小值
                markPoint: {
                    //标注的数据数组，每一项都是一个对象
                    data: [
                        {
                            type: "max",
                            name: "最大值"
                        },
                        {
                            type: "min",
                            name: "最小值"
                        }
                    ]
                },
                // 图表的标线
                markLine: {
                    data: [
                        {
                            type: "average",
                            name: "平均值"
                        }
                    ]
                }
            }
        })
 
    }
 
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制

2.3、饼图

饼状图
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 设置数据
        let data = [
            { value: 67, name: "美食" },
            { value: 175, name: "日化" },
            { value: 27, name: "数码" },
            { value: 89, name: "家电" }
        ];
        let option = {
            title: {
                text: "饼状图",
                left: "center"
            },
            //图例
            legend: {
                left: "left",
                // 图例的布局朝向
                orient: "verical",
            },
            series: [
                {
                    name: "销量统计",
                    type: "pie",
                    data: data,
                },
 
            ],
        };
        vchart.setOption(option);
 
    }
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
环形图
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 设置数据
        // let data = [
        //     { value: 67, name: "美食" },
        //     { value: 175, name: "日化" },
        //     { value: 40, name: "数码" },
        //     { value: 89, name: "家电" }
        // ];
        let data = [
            { value: 67, name: "美食", itemStyle: { normal: { color: 'rgb(1,175,80)' } } },
            { value: 175, name: "日化", itemStyle: { normal: { color: 'rgb(255,175,80)' } } },
            { value: 40, name: "数码", itemStyle: { normal: { color: 'rgb(1,0,80)' } } },
            { value: 89, name: "家电", itemStyle: { normal: { color: 'rgb(30,50,70)' } } }
        ];
        let option = {
            title: {
                text: "饼状图",
                left: "center"
            },
            //图例
            legend: {
                left: "left",
                // 图例的布局朝向
                orient: "verical",
            },
            series: [
                {
                    name: "销量统计",
                    type: "pie",
                    data: data,
                    // 设置饼图的半径，第一项内半径，第二项外半径
                    radius: ["40%", "70%"],
                    // 设置环形图的文本标签
                    label: {
                        show: true,
                        // outside外侧展示，inside内存展示，center中心展示
                        position: "inside",
                    },
                    // 是否设置成南丁格尔图
                    roseType: "area",
                    itemStyle: {
                        color: '#c29375',
                        shadowBlur: 200,
                        shadowColor: "reba(0,0,0,.5)"
                    }
                },
 
            ],
        };
        vchart.setOption(option);
 
    }
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制

2.4、折线图

折线图效果
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 设置数据
        let xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
        let data = [130, 25, 234, 164, 89, 188, 79];
        // 配置项
        let option = {
            xAxis: {
                type: "category",
                data: xData
            },
            yAxis: {
                type: "value"
            },
            series: [
                {
                    data: data,
                    // 折线图
                    type: "line",
                    // 开启平滑的过渡
                    smooth: true,
                    // 折线图样式
                    areaStyle: {},
                    // 图表的标注标线
                    markPoint: {
                        data: [
                            { type: "max", name: "最大值" },
                            { type: "min", name: "最小值" }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: "average", name: "平均值" }
                        ]
                    }
 
 
                }
            ]
        };
        // 设置配置项
        vchart.setOption(option);
 
 
    }
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
折线图堆叠
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 设置数据
        let xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
        let dataA = [130, 25, 234, 164, 89, 188, 79];
        let dataB = [60, 215, 124, 164, 111, 288, 190];
        let dataC = [90, 87, 77, 164, 299, 88, 179];
        let dataD = [240, 85, 478, 527, 333, 142, 100];
        // 配置项
        let option = {
            xAxis: {
                type: "category",
                data: xData
            },
            yAxis: {
                type: "value"
            },
            series: [
                {
                    name: "美食",
                    type: "line",
                    // 数据堆叠：同类型的数据需要匹配相同的stack属性值
                    stack: "num",
                    data: dataA,
                    // 样式填充
                    areaStyle: {},
                    // 选中高亮状态
                    emphasis: {
                        // 聚焦当前的区域高亮
                        focus: "series"
                    },
                },
                {
                    name: "日化",
                    type: "line",
                    // 数据堆叠：同类型的数据需要匹配相同的stack属性值
                    stack: "num",
                    data: dataB,
                    // 样式填充
                    areaStyle: {},
                    // 选中高亮状态
                    emphasis: {
                        // 聚焦当前的区域高亮
                        focus: "series"
                    },
                },
                {
                    name: "数码",
                    type: "line",
                    // 数据堆叠：同类型的数据需要匹配相同的stack属性值
                    stack: "num",
                    data: dataC,
                    // 样式填充
                    areaStyle: {},
                    // 选中高亮状态
                    emphasis: {
                        // 聚焦当前的区域高亮
                        focus: "series"
                    },
                },
                {
                    name: "家电",
                    type: "line",
                    // 数据堆叠：同类型的数据需要匹配相同的stack属性值
                    stack: "num",
                    data: dataD,
                    // 样式填充
                    areaStyle: {},
                    // 选中高亮状态
                    emphasis: {
                        // 聚焦当前的区域高亮
                        focus: "series"
                    },
                },
 
 
 
            ]
        };
        // 设置配置项
        vchart.setOption(option);
 
 
    }
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制

2.5、散点图

散点图基本效果
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        let options = {
            xAxis: {},
            yAxis: {},
            series: [
                {
                    // 设置数据
                    data: [
                        [10.0, 8.04],
                        [8.07, 6.95],
                        [13.0, 7.58],
                        [9.05, 8.81],
                        [11.0, 8.33],
                        [14.0, 7.66],
                        [13.4, 6.81],
                        [10.0, 6.33],
                        [14.0, 8.96],
                        [12.5, 6.82],
                        [9.15, 7.2],
                        [11.5, 7.2],
                        [3.03, 4.23],
                        [12.2, 7.83],
                        [2.02, 4.47],
                        [1.05, 3.33],
                        [4.05, 4.96],
                        [6.03, 7.24],
                        [12.0, 6.26],
                        [12.0, 8.84],
                        [7.08, 5.82],
                        [5.02, 5.68]
                    ],
                    // 散点图
                    type: "scatter",
                    // 设置散点图大小
                    symbolSize: 20,
                }
            ]
        };
        // 图标绘制
        vchart.setOption(options);
    }
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
散点图效果实现
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        let options = {
            xAxis: {},
            yAxis: {},
            // 提示框
            tooltip: {},
            series: [
                {
                    // 设置数据
                    data: [
                        [10.0, 8.04],
                        [8.07, 6.95],
                        [13.0, 7.58],
                        [9.05, 8.81],
                        [11.0, 8.33],
                        [14.0, 7.66],
                        [13.4, 6.81],
                        [10.0, 6.33],
                        [14.0, 8.96],
                        [12.5, 6.82],
                        [9.15, 7.2],
                        [11.5, 7.2],
                        [3.03, 4.23],
                        [12.2, 7.83],
                        [2.02, 4.47],
                        [1.05, 3.33],
                        [4.05, 4.96],
                        [6.03, 7.24],
                        [12.0, 6.26],
                        [12.0, 8.84],
                        [7.08, 5.82],
                        [5.02, 5.68]
                    ],
                    // 散点图
                    type: "scatter",
                    // 设置散点图大小
                    symbolSize: 20,
                    // 图形样式
                    // color:"red",
                    color: {
                        // 线性渐变
                        type: "linear",
                        // 四个属性相当于在图形包围盒中的百分比
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        // 线性渐变的颜色
                        colorStops: [
                            {
                                offset: 0,
                                color: "#00ccff"
                            },
                            {
                                offset: 1,
                                color: "rgba(255,173,2,.9)"
                            }
                        ],
                    },
                    // 选中高亮效果
                    emphasis: {
                        itemStyle: {
                            borderColor: "rgba(100,200,50,.5)",
                            borderWidth: 30,
                        }
                    },
                }
            ]
        };
        // 图标绘制
        vchart.setOption(options);
    }
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制

2.6、K线图

K线图基本效果
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        let option = {
            xAxis: {
                data: ['日化', '蔬菜', '电器', '美妆'],
            },
            yAxis: {
 
            },
            series: [
                {
                    // K线图
                    type: "candlestick",
                    data: [
                        [20, 34, 10, 38],
                        [40, 35, 30, 50],
                        [31, 38, 33, 44],
                        [38, 15, 5, 42]
                    ]
                },
            ],
        };
 
        vchart.setOption(option);
    },
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
K线图效果实现
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
    data() {
        return {
            kdata: [
                [20, 34, 10, 38],
                [40, 35, 30, 50],
                [31, 38, 33, 44],
                [38, 15, 5, 42]
            ],
        }
    },
    computed: {
        newData() {
            return this.kdata.map(v => v[0]);
        }
    },
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        let option = {
            xAxis: {
                data: ['日化', '蔬菜', '电器', '美妆'],
            },
            yAxis: {
 
            },
            // 提示框
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "cross",
                },
            },
            series: [
                {
                    // K线图
                    type: "candlestick",
                    data: this.kdata,
                    itemStyle: {
                        // 上涨的颜色
                        color: "#ec5566",
                        // 下跌的颜色
                        color0: "green",
                        // 上涨的边框色
                        borderColor: "#8A0000",
                        // 下跌的边框色
                        borderColor0: "#008F28",
 
                    },
                    markPoint: {
                        data: [
                            {
                                name: "最大值",
                                type: "max",
                                // 设置在那个维度上面进行最大最小值
                                valueDim: "highest"
                            },
                            {
                                name: "最小值",
                                type: "min",
                                valueDim: "lowest"
                            },
                            {
                                name: "平均值",
                                type: "average",
                                valueDim: "close",
                            }
                        ]
                    }
                },
                // 折线图
                {
                    type: "line",
                    smooth: true,
                    data: this.newData,
                }
            ],
        };
 
        vchart.setOption(option);
    },
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制

2.7、雷达图

雷达图基本效果
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        let option = {
            title: {
                text: "雷达图"
            },
            radar: [
                {
                    // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
                    indicator: [
                        { name: "蔬菜", max: 6500 },
                        { name: "水果", max: 16000 },
                        { name: "熟食", max: 30000 },
                        { name: "数码", max: 38000 },
                        { name: "家电", max: 52000 },
                        { name: "日化", max: 25000 }
                    ],
                    // 设置雷达图效果图
                    shape: "circle",
                }
            ],
            series: [
                {
                    type: "radar",
                    data: [
                        {
                            value: [4200, 5300, 6666, 2345, 15234, 14567]
                        }
                    ]
                }
            ]
        };
 
        vchart.setOption(option);
    },
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
雷达图效果实现
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        let option = {
            title: {
                text: "雷达图"
            },
            radar: [
                {
                    // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
                    indicator: [
                        { name: "蔬菜", max: 6500 },
                        { name: "水果", max: 16000 },
                        { name: "熟食", max: 30000 },
                        { name: "数码", max: 38000 },
                        { name: "家电", max: 52000 },
                        { name: "日化", max: 25000 }
                    ],
                    // 设置雷达图效果图
                    shape: "circle",
                    // 设置雷达图半径
                    radius: 200,
                    // 设置雷达图角度、内容进行旋转
                    // 坐标系的起始角度，进行旋转
                    startAngle: 180,
                    // 内部分割层级
                    splitNumber: 4,
                    // 设置内容及颜色
                    axisName: {
                        formatter: "{value}",
                        color: "#428BD4"
                    },
                    // 设置分割区域效果
                    splitArea: {
                        // 设置分割区的样式
                        areaStyle: {
                            color: ["#77EADE", "#26C3BE", "#64AFE9", "#428BD4"],
                            shadowColor: "0,0,0,.2",
                            shadowBlur: 10
                        }
                    }
                }
            ],
            series: [
                {
                    type: "radar",
                    data: [
                        {
                            value: [4200, 5300, 6666, 2345, 15234, 14567],
                            // 内容填充样式
                            areaStyle: {
                                color: "rgba(255,255,0,.5)"
                            }
                        }
                    ],
                    lineStyle: {
                        type: "dashed"
                    }
                },
 
            ]
        };
 
        vchart.setOption(option);
    },
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制

2.8、漏斗图

漏斗图基本效果
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        let options = {
            title: {
                text: "漏斗图"
            },
            tooltip: {
                trigger: "item",
                formatter: "{a}<br/>{b}:{c}%"
            },
            series: {
                // 设置漏斗图
                type: "funnel",
                data: [
                    { value: 60, name: "美食" },
                    { value: 40, name: "日化" },
                    { value: 20, name: "数码" },
                    { value: 80, name: "家电" },
                    { value: 100, name: "蔬菜" },
                ],
                left: "10%"
            },
        };
        vchart.setOption(options);
    },
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
漏斗图效果实现
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        let options = {
            title: {
                text: "漏斗图"
            },
            tooltip: {
                trigger: "item",
                formatter: "{a}<br/>{b}:{c}%"
            },
            series: {
                // 设置漏斗图
                type: "funnel",
                data: [
                    { value: 60, name: "美食" },
                    { value: 40, name: "日化" },
                    { value: 20, name: "数码" },
                    { value: 80, name: "家电" },
                    { value: 100, name: "蔬菜" },
                ],
                left: "10%",
                // 排序：ascending、none
                sort: "ascending",
                // 样式
                itemStyle: {
                    borderColor: "red",
                    borderWidth: 3,
                },
                // 提示信息
                label: {
                    show: true,
                    // 提示文本
                    position: "inside",
                },
                // 选中凸显
                emphasis:{
                    label:{
                        fontSize:30,
                    }
                }
 
            },
        };
        vchart.setOption(options);
    },
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制

2.9、仪表盘

仪表盘设置
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        let options = {
            series: {
                type: "gauge",
                data: [
                    {
                        value: 45,
                        name: "提示信息",
                    }
                ],
                // 动画
                detail: {
                    calueAnimation: true,
                },
                // 外圈
                progress: {
                    show: true,
                }
            }
        };
        vchart.setOption(options);
    },
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制

2.10、关系图

关系图设置
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    data() {
        return {
            // 节点数据
            list: [
                {
                    name: "韦小宝",
                    id: "1",
                    symbolSize: 30
                },
                {
                    name: "方怡",
                    id: "2",
                    symbolSize: 30
                },
                {
                    name: "双儿",
                    id: "3",
                    symbolSize: 30
                },
                {
                    name: "茅十八",
                    id: "4",
                    symbolSize: 30
                },
                {
                    name: "吴六奇",
                    id: "5",
                    // 样式
                    symbolSize: 30
                },
            ],
            // 关系数据
            num: [
                {
                    // 边的节点名称
                    source: "1",
                    // 目标节点名称
                    target: "2",
                    // 
                    relation: {
                        name: "老婆",
                        id: "1"
                    }
                },
                {
                    // 边的节点名称
                    source: "1",
                    // 目标节点名称
                    target: "4",
                    // 
                    relation: {
                        name: "兄弟",
                        id: "1"
                    }
                },
                {
                    // 边的节点名称
                    source: "4",
                    // 目标节点名称
                    target: "1",
                    // 
                    relation: {
                        name: "兄弟",
                        id: "1"
                    }
                },
                {
                    // 边的节点名称
                    source: "3",
                    // 目标节点名称
                    target: "5",
                    // 
                    relation: {
                        name: "义妹",
                        id: "1"
                    }
                },
            ]
        }
    },
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        let options = {
 
            series: [
                {
                    // 关系图
                    type: "graph",
                    data: this.list,
                    // 引导布局
                    layout: "force",
                    // 样式
                    itemStyle: {
                        color: "#95dcb2"
                    },
                    // 图形上的文字
                    label: {
                        // 是否显示
                        show: true,
                        // 文字的位置
                        position: "bottom",
                        // 距离图形的位置
                        distance: 6,
                        fontSize: 16,
                        align: "center"
                    },
                    // 设置间距
                    force: {
                        // 点与点的间距
                        repulsion: 100,
                        // 距离中心点的距离
                        qravity: 0.01,
                        // 两边点的距离
                        edgeLength: 200,
                    },
                    // 节点关系数据
                    links: this.num,
                    // 设置内容
                    edgeLabel: {
                        show: true,
                        // 标签中线
                        position: "middle",
                        formatter: (params) => {
                            return params.data.relation.name;
                        }
                    }
 
                }
            ]
 
        };
        vchart.setOption(options);
    },
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制

2.11、数据区域缩放

数据区域缩放设置
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 设置数据
        let xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
        let data = [150, 230, 224, 218, 135, 147, 260];
        // 配置项
        let option = {
            xAxis: {
                type: "category",
                data: xData
            },
            yAxis: {
                type: "value"
            },
            series: [
                {
                    data: data,
                    // 折线图
                    type: "line",
                    // 开启平滑的过渡
                    smooth: true,
                    // 折线图样式
                    // areaStyle: {},
                    // 图表的标注标线
                    markPoint: {
                        data: [
                            { type: "max", name: "最大值" },
                            { type: "min", name: "最小值" }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: "average", name: "平均值" }
                        ]
                    }
 
 
                }
            ],
		   // 数据区域缩放设置
            dataZoom: [
                {
                    type: "slider",
                    xAxisIndex: 0,
                    filterMode: "none",
                },
                {
                    type: "slider",
                    yAxisIndex: 0,
                    filterMode: "none",
                },
            ]
        };
        // 设置配置项
        vchart.setOption(option);
 
 
    }
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制

2.12、树图

树图基本设置
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
    data() {
        return {
            list: {
                // 最外层的数据就是数据的根节点
                name: "根节点",  //名字
                children: [
                    {
                        name: "层级2",
                        children: [
                            {
                                name: "层级3-1",
                                children: [
                                    { name: "数据1", vaule: 123 },
                                    { name: "数据2", vaule: 456 },
                                    { name: "数据3", vaule: 567 },
                                    { name: "数据4", vaule: 678 },
                                ]
                            },
                            {
                                name: "层级3-2",
                                children: [
                                    { name: "数据1", vaule: 123 },
                                    { name: "数据2", vaule: 456 },
                                    { name: "数据3", vaule: 567 },
                                    { name: "数据4", vaule: 678 },
                                ]
                            },
                        ]
                    }
                ]
            }
        }
    },
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 配置项
        let options = {
            tooltip: {
                trigger: "item",
            },
            series: [
                {
                    type: "tree",
                    data: [this.list],
                    // 标记大小
                    symbolSize: 15,
                    label: {
                        position: "left",
                        verticalAlign: "middle",
                        align: "conter",
                        fontSize: 10,
                    },
                    // 子节点
                    leaves: {
                        label: {
                            position: "right",
                            verticalAlign: "middle",
                            align: "conter",
                        }
                    },
                    emphasis: {
                        // 高亮子孙节点
                        focus: "descendant"
                    }
                }
            ]
        };
        // 设置配置项
        vchart.setOption(options);
 
 
    }
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
树图方向切换
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 配置项
        let options = {
            dataset: [
                {
                    // 数据分类
                    dimensions: ["类别", "数量"],
                    // 分类数据
                    source: [
                        ["美食", 123],
                        ["日化", 98],
                        ["熟食", 342],
                        ["数码", 267],
                        ["蔬菜", 318],
                        ["水果", 427]
                    ]
                },
                {
                    transform: {
                        // 数据排序
                        type: "sort",
                        config: {
                            // 排序字段及规则
                            dimension: "数量", order: "desc"
                        }
                    }
                }
            ],
            xAxis: {
                type: "category",
                axisLabel: {
                    // 间隔
                    interval: 0,
                    // 倾斜
                    rotate: 30,
                }
            },
            yAxis: {},
            series: [
                {
                    type: "bar",
                    encode: {
                        x: "类别",
                        y: "数量"
                    },
                    datasetIndex: 1,
                },
 
            ]
        };
        // 设置配置项
        vchart.setOption(options);
    }
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制

2.13、主题设置

内置主题
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    mounted() {
        // 2、初始化echarts
        // echarts中内置主题：light、dark
        let vchart = echarts.init(this.$refs.vcharts,"dark");
        // 配置项
        let options = {
            dataset: [
                {
                    // 数据分类
                    dimensions: ["类别", "数量"],
                    // 分类数据
                    source: [
                        ["美食", 123],
                        ["日化", 98],
                        ["熟食", 342],
                        ["数码", 267],
                        ["蔬菜", 318],
                        ["水果", 427]
                    ]
                },
                {
                    transform: {
                        // 数据排序
                        type: "sort",
                        config: {
                            // 排序字段及规则
                            dimension: "数量", order: "desc"
                        }
                    }
                }
            ],
            xAxis: {
                type: "category",
                axisLabel: {
                    // 间隔
                    interval: 0,
                    // 倾斜
                    rotate: 30,
                }
            },
            yAxis: {},
            series: [
                {
                    type: "bar",
                    encode: {
                        x: "类别",
                        y: "数量"
                    },
                    datasetIndex: 1,
                },
 
            ]
        };
        // 设置配置项
        vchart.setOption(options);
    }
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style><template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
 
    mounted() {
        // 2、初始化echarts
        // echarts中内置主题：light、dark
        let vchart = echarts.init(this.$refs.vcharts,"dark");
        // 配置项
        let options = {
            dataset: [
                {
                    // 数据分类
                    dimensions: ["类别", "数量"],
                    // 分类数据
                    source: [
                        ["美食", 123],
                        ["日化", 98],
                        ["熟食", 342],
                        ["数码", 267],
                        ["蔬菜", 318],
                        ["水果", 427]
                    ]
                },
                {
                    transform: {
                        // 数据排序
                        type: "sort",
                        config: {
                            // 排序字段及规则
                            dimension: "数量", order: "desc"
                        }
                    }
                }
            ],
            xAxis: {
                type: "category",
                axisLabel: {
                    // 间隔
                    interval: 0,
                    // 倾斜
                    rotate: 30,
                }
            },
            yAxis: {},
            series: [
                {
                    type: "bar",
                    encode: {
                        x: "类别",
                        y: "数量"
                    },
                    datasetIndex: 1,
                },
            ]
        };
        // 设置配置项
        vchart.setOption(options);
    }
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
自定义主题

1、在主题编辑器中编辑主题
主题编辑器地址：https://echarts.apache.org/zh/theme-builder.html
2、下载对应主题json格式
3、创建js文件把刚下载的文件写入并且暴露

let roma = 主题json
export default roma
复制

4、引用主题文件

2.14、地图

中国地图展示

1、准备echarts基本结构
2、设置中国地图的矢量数据创建js文件
地图数据下载：https://datav.aliyun.com/portal/school/atlas/area_selector
3、在组件中获取地图矢量数据（引用数据json）
4、使用地图数据创建地图
5、百度地图开发平台：https://lbsyun.baidu.com/
在这里插入图片描述

chinamap.js
 
复制
About.vue
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
import { mapdata } from "../assets/chinamap.js"
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 注册当前使用的地图名
        echarts.registerMap("chinaMap", mapdata);
 
        // 配置项
        let options = {
            // 地理坐标组件
            geo: {
                type: "map",
                map: "chinaMap",
                // 平移缩放
                roam: true,
                zoom: 10,
                center: [116.402464, 39.915794]
            }
        };
        // 设置配置项
        vchart.setOption(options);
    }
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
地图标记设置与效果
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
import { mapdata } from "../assets/chinamap.js"
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 注册当前使用的地图名
        echarts.registerMap("chinaMap", mapdata);
 
        // 配置项
        let options = {
            // 地理坐标组件
            geo: {
                type: "map",
                map: "chinaMap",
                // 平移缩放
                roam: true,
                // zoom: 10,
                // center: [116.402464, 39.915794]
                label: {
                    show: true,
                    color: "#ff6600",
                    fontSize: 10,
                },
                itemStyle: {
                    areaColor: "green"
                }
            }
        };
        // 设置配置项
        vchart.setOption(options);
    }
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制
地图散点图
<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
import { mapdata } from "../assets/chinamap.js"
 
export default {
 
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 注册当前使用的地图名
        echarts.registerMap("chinaMap", mapdata);
 
        // 配置项
        let options = {
            // 地理坐标组件
            geo: {
                type: "map",
                map: "chinaMap",
                // 平移缩放
                roam: true,
 
            },
            series: [
                // 散点图
                {
                    type: "scatter",
                    data: [
                        {
                            // 数据项名称
                            name: "北京",
                            value: [
                                116.46,
                                39.92,
                                4000
                            ],
                        }
                    ],
                    coordinateSystem: "geo",
                    symbolSize: 30,
                    label: {
                        show: true,
                    },
                },
                // 涟漪效果散点图
                {
                    type: "effectScatter",
                    coordinateSystem: "geo",
                    data: [
                        {
                            name: "西安",
                            value: [
                                108.95,
                                34.26
                            ]
                        }
                    ],
                    // 设置涟漪效果的相关配置
                    rippleEffect: {
                        // 波纹数量
                        number: 2,
                        scale: 4,
                    },
                    itemStyle: {
                        color: "red"
                    }
                }
            ]
        };
        // 设置配置项
        vchart.setOption(options);
    }
}
</script>
<style>
#about {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
复制

2.15、图标自适应大小

<template>
    <!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
    <div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
 
export default {
    mounted() {
        // 2、初始化echarts
        let vchart = echarts.init(this.$refs.vcharts);
        // 设置数据
        let xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
        let dataA = [130, 25, 234, 164, 89, 188, 79];
        let dataB = [60, 215, 124, 164, 111, 288, 190];
        let dataC = [90, 87, 77, 164, 299, 88, 179];
        let dataD = [240, 85, 478, 527, 333, 142, 100];
        // 配置项
        let option = {
            xAxis: {
                type: "category",
                data: xData
            },
            yAxis: {
                type: "value"
            },
            series: [
                {
                    name: "美食",
                    type: "line",
                    // 数据堆叠：同类型的数据需要匹配相同的stack属性值
                    stack: "num",
                    data: dataA,
                    // 样式填充
                    areaStyle: {},
                    // 选中高亮状态
                    emphasis: {
                        // 聚焦当前的区域高亮
                        focus: "series"
                    },
                },
                {
                    name: "日化",
                    type: "line",
                    // 数据堆叠：同类型的数据需要匹配相同的stack属性值
                    stack: "num",
                    data: dataB,
                    // 样式填充
                    areaStyle: {},
                    // 选中高亮状态
                    emphasis: {
                        // 聚焦当前的区域高亮
                        focus: "series"
                    },
                },
                {
                    name: "数码",
                    type: "line",
                    // 数据堆叠：同类型的数据需要匹配相同的stack属性值
                    stack: "num",
                    data: dataC,
                    // 样式填充
                    areaStyle: {},
                    // 选中高亮状态
                    emphasis: {
                        // 聚焦当前的区域高亮
                        focus: "series"
                    },
                },
                {
                    name: "家电",
                    type: "line",
                    // 数据堆叠：同类型的数据需要匹配相同的stack属性值
                    stack: "num",
                    data: dataD,
                    // 样式填充
                    areaStyle: {},
                    // 选中高亮状态
                    emphasis: {
                        // 聚焦当前的区域高亮
                        focus: "series"
                    },
                },
            ]
        };
        // 设置配置项
        vchart.setOption(option);
        // 监听页面大小的改变
        window.addEventListener("resize", () => {
            vchart.resize();
        });
    }
}
</script>
<style>
#about {
    width: 100%;
    height: 500px;
    border: 1px solid red;
}
</style>
复制

2.16、加载动画效果

安装json-server
npm install -g json-server
复制
模拟数据

新建src/mock/data.json

{
   "one": [
        { "value": 67, "name": "美食", "itemStyle": { "normal": { "color": "rgb(1,175,80)" } } },
        { "value": 175,"name": "日化", "itemStyle": { "normal": { "color": "rgb(255,175,80)" } } },
        { "value": 40, "name": "数码", "itemStyle": { "normal": { "color": "rgb(1,0,80)" } } },
        { "value": 89, "name": "家电", "itemStyle": { "normal": { "color": "rgb(30,50,70)" } } }
    ]
}
复制
启动json-server

在src/mock/执行

json-server --watch data.json --port 8090
复制
访问
http://localhost:8090/one
复制
安装axios
npm install --save axios
复制
使用axios
               data: dataA,
                // 样式填充
                areaStyle: {},
                // 选中高亮状态
                emphasis: {
                    // 聚焦当前的区域高亮
                    focus: "series"
                },
            },
            {
                name: "日化",
                type: "line",
                // 数据堆叠：同类型的数据需要匹配相同的stack属性值
                stack: "num",
                data: dataB,
                // 样式填充
                areaStyle: {},
                // 选中高亮状态
                emphasis: {
                    // 聚焦当前的区域高亮
                    focus: "series"
                },
            },
            {
                name: "数码",
                type: "line",
                // 数据堆叠：同类型的数据需要匹配相同的stack属性值
                stack: "num",
                data: dataC,
                // 样式填充
                areaStyle: {},
                // 选中高亮状态
                emphasis: {
                    // 聚焦当前的区域高亮
                    focus: "series"
                },
            },
            {
                name: "家电",
                type: "line",
                // 数据堆叠：同类型的数据需要匹配相同的stack属性值
                stack: "num",
                data: dataD,
                // 样式填充
                areaStyle: {},
                // 选中高亮状态
                emphasis: {
                    // 聚焦当前的区域高亮
                    focus: "series"
                },
            },
        ]
    };
    // 设置配置项
    vchart.setOption(option);
    // 监听页面大小的改变
    window.addEventListener("resize", () => {
        vchart.resize();
    });
}
复制

}

### 2.16、加载动画效果
#### 安装json-server
 
复制

npm install -g json-server

 
#### 模拟数据
 
新建src/mock/data.json
 
复制

{
“one”: [
{ “value”: 67, “name”: “美食”, “itemStyle”: { “normal”: { “color”: “rgb(1,175,80)” } } },
{ “value”: 175,“name”: “日化”, “itemStyle”: { “normal”: { “color”: “rgb(255,175,80)” } } },
{ “value”: 40, “name”: “数码”, “itemStyle”: { “normal”: { “color”: “rgb(1,0,80)” } } },
{ “value”: 89, “name”: “家电”, “itemStyle”: { “normal”: { “color”: “rgb(30,50,70)” } } }
]
}

 
#### 启动json-server
 
在src/mock/执行
 
复制

json-server --watch data.json --port 8090

#### 访问
 
复制

http://localhost:8090/one

#### 安装axios
 
复制

npm install --save axios

#### 使用axios
 
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/5711.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！