vue的echarts学习（折线图line，柱状图bar）

末尾有vue的echarts组件

line折线图

• echarts自适应页面

    let myChart = echarts.init(document.getElementById(`${this.id}`));
    myChart.clear();
    myChart.setOption(option, true);
    window.addEventListener("resize", () => {
        myChart.resize();
    });

• 提示+吸附

   let option = {
       tooltip: {
           trigger: "axis",
           axisPointer: {
               snap: true,
           },
       },
   }

• 流线型+放大数据点+渐变背景

let option = {
    series: [
         {
         name: "浏览次数",
         data: [820, 932, 901, 934, 1290, 1330, 1320],
         type: "line",
         smooth: true,//流线型
         symbolSize: 10,//放大点
         areaStyle: {//渐变背景
             color: new echarts.graphic.LinearGradient(
                 0,
                 0,
                 0,
                 1,
                 [
                     {
                         offset: 0,
                         color: "#66CCCC",
                     },
                     {
                         offset: 1,
                         color: "#fff",
                     },
                 ]
             ),
         },
     },
    ]
}

• 折线图组件（需要传id），可以自己传别的数据进行修改自定义

<template>
    <div class="table-echarts">
        <div :id="id" style="width:100%;height:100%;"></div>
    </div>
</template>

<script>
import echarts from "echarts";
export default {
    name: "table-echarts",
    props: {
        id: {
            type: String,
            default: "echarts",
        },
    },
    data() {
        return {};
    },
    watch: {},
    mounted() {
        this.initEcharts();
    },
    methods: {
        initEcharts() {
            let xAxisData = [
                "2020-9-23",
                "2020-9-24",
                "2020-9-25",
                "2020-9-26",
                "2020-9-27",
                "2020-9-28",
                "2020-9-28",
            ];
            let colors = [
                "#66CCCC",
                "#CCFF66",
                "#FF99CC",
                "#FF9999",
                "#FFFF66",
                "#FFCC00",
                "#FF9900",
                "#CC3399",
                "#CCFF99",
            ];
            let option = {
                color: colors,
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        snap: true,
                    },
                },
                legend: {
                    data: ["浏览次数", "访问次数", "表单提交量"],
                    itemGap: 20,
                    left: "0%",
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: xAxisData,
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        name: "浏览次数",
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: "line",
                        smooth: true,
                        symbolSize: 10,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: "#66CCCC",
                                    },
                                    {
                                        offset: 1,
                                        color: "#fff",
                                    },
                                ]
                            ),
                        },
                    },
                    {
                        name: "访问次数",
                        data: [120, 222, 401, 234, 3290, 430, 820],
                        type: "line",
                        smooth: true,
                        symbolSize: 10,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: "#CCFF66",
                                    },
                                    {
                                        offset: 1,
                                        color: "#fff",
                                    },
                                ]
                            ),
                        },
                    },
                    {
                        name: "表单提交量",
                        data: [1120, 322, 101, 534, 890, 230, 520],
                        type: "line",
                        smooth: true,
                        symbolSize: 10,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: "#FF99CC",
                                    },
                                    {
                                        offset: 1,
                                        color: "#fff",
                                    },
                                ]
                            ),
                        },
                    },
                ],
            };
            let myChart = echarts.init(document.getElementById(`${this.id}`));
            myChart.clear();
            myChart.setOption(option, true);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        },
    },
};
</script>

<style lang='less' scoped>
.table-echarts {
    width: 100%;
    height: 436px;
}
</style>

bar柱状图

最终样式

• 自适应和上面一样
• 提示和吸附

提示注意我这里是百分比，所以需要处理。简单的可以用formatter。
关于formatter，详细可看formatter
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。

 tooltip: {
     trigger: "axis",
     axisPointer: {
         snap: true,
     },
     formatter: "{b}:{c}%",
 },

复杂的提示需要用回调函数处理。

tooltip: {
    trigger: "axis",
    formatter: function (params, ticket, callback) {
        return `<p>${}</p>${}`;
    }
},

y轴的百分数也要处理。

1. y轴需要传不含%的数字或者字符串，[1,2,3…]
2. 对y轴处理

 yAxis: {
     type: "value",
     axisLabel: {
         formatter: "{value} %",
     },
 },

• 组件

1. 需要传个对象，channelData是个对象，里面有x轴数据xAxisData，y轴数据seriesDatas

<template>
    <div class="echarts-contanier">
        <div id="channel-echarts" style="width:100%;height:100%;"></div>
    </div>
</template>

<script>
import echarts from "echarts";
export default {
    props: {
        channelData: {
            type: Object,
            default: {},
        },
    },
    name: "",
    data() {
        return {};
    },
    watch: {
        channelData: {
            handler(val) {
                this.initEcharts();
            },
            deep: true,
        },
    },
    mounted() {
        this.initEcharts();
    },
    methods: {
        initEcharts() {
            let option = {
                color: "#574b90",
                title: {
                    left: "center",
                    text: "渠道意向率",
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        snap: true,
                    },
                    formatter: "{b}:{c}%",
                },
                legend: {
                    data: ["意向率"],
                    bottom: "0%",
                },
                xAxis: {
                    type: "category",
                    data: this.channelData.xAxisData,
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        formatter: "{value} %",
                    },
                },
                series: [
                    {
                        name: "意向率",
                        data: this.channelData.seriesDatas,
                        type: "bar",
                        areaStyle: {},
                    },
                ],
            };
            let myChart = echarts.init(
                document.getElementById(`channel-echarts`)
            );
            myChart.clear();
            myChart.setOption(option, true);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        },
    },
};
</script>

<style lang='less' scoped>
.echarts-contanier {
    width: 100%;
    height: 100%;
}
</style>