echarts基本使用

最新推荐文章于 2023-08-01 08:34:10 发布

六月的六

最新推荐文章于 2023-08-01 08:34:10 发布

阅读量666

点赞数 1

分类专栏：前端文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/dearand/article/details/125289748

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

echarts

前言：

老大说要让我帮产品做个报表，让我看是用 python的，还是用echarts。

由于python不是很熟悉，就选了echarts，虽然echarts也没玩过，但是只要是java服务，不都是后台请求接口，前端展示数据。

目录：

文章目录

echarts

使用：

直接去echarts官网拿样式，按照提示来。

在这里插入图片描述
.png)]

copy代码

在这里插入图片描述

折线图

类型：

单线图
多线图

单线图

数据结构分析：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

在这里插入图片描述

多线图

多线图和单线图没啥区别，就是y轴有多组数据

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

柱状图

类型：

基本上就是分为多柱图和单柱图

单柱图
多柱图

单柱图

多柱图

实例

折线图

效果图

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>Stacked Line Chart - Apache ECharts Demo</title>
    <link rel="stylesheet" href="./style.css">
    <script src="../../js/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/element.js"></script>
    <script src="../../js/tinymce/tinymce.min.js"></script>
</head>
<body>

<div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">门店</button>

    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
            请选择门店
            <span class="caret"></span>
        </button>
        <!--<ul class="dropdown-menu" id="select_store" name="storeName">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
        </ul>-->
        <select id="issued_sub_key_c" name="issued_sub_key_c">
            <option>请选择门店</option>
        </select>
    </div>
</div>

<div id="wrapper" v-cloak>
    <el-container>
        <el-container>
            <!-- 主体区域 -->
            <el-main>
                <div style="height: 1px; background-color: white"></div>
                <el-input v-model="search" style="width: 20%;" suffix-icon="el-icon-search" placeholder="请输入名称按回车搜索"
                          @keyup.enter.native="loadTable"></el-input>

                <el-select v-model="selectStore" filterable placeholder="请选择" clearable filterable
                           @change="selectTrigger(selectStore)">
                    <el-option
                            v-for="item in options"
                            :key="item.tiktokId"
                            :label="item.storeName"
                            :value="item.tiktokId"
                            @click.native="changeProduct(item)">
                    </el-option>
                </el-select>

            </el-main>
        </el-container>
    </el-container>
</div>


<div class="container-fluid">
    <div class="row-fluid">
        <h1>单门店数据分析维度</h1>
        <div class="span12">
            <div class="row-fluid">
                <div class="span6">
                    <div id="chart-container"></div>

                </div>
                <div class="span6">
                    <div id="chart-container2"></div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span6">
                    <div id="chart-container3"></div>
                </div>
                <div class="span6">
                    <div id="chart-container4"></div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span6">
                    <div id="chart-container5"></div>
                </div>
                <div class="span6">
                    <div id="chart-container6"></div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span6">
                    <div id="chart-container7"></div>
                </div>
                <div class="span6">
                    <div id="chart-container8"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>

<script src="./index.js"></script>


<script>

    let urlBase = "/api/notice/";
    new Vue({
        el: "#wrapper",
        data: {
            user: {},
            tableData: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            dialogFormVisible: false,
            entity: {},
            isCollapse: false,
            search: '',
            options: [{
                tiktokId: '选项1',
                storeName: '黄金糕'
            }],
            selectStore: {
            },
            productActive: '',
        },
        created() {
            //下拉框调用函数
            this.selectStore1();

        },
        methods: {
            selectTrigger(val) {
                console.info("val:",val)
            },
            changeProduct(item) {
                this.selectStore = item.tiktokId;
                console.info("item.tiktokId:", item.tiktokId)
                console.info("this.selectStore:", this.selectStore)
                console.info("调用sendAjax方法！")
                let obj={};
                obj.tiktokId=item.tiktokId;
                sendAjax(obj);
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            selectStore1() {

                $.ajax({
                    url: "http://localhost:9998/api/tiktokWeeklyStore/listAllSore",//请求的url地址
                    dataType: "json",//返回的格式为json
                    async: true,//请求是否异步，默认true异步，这是ajax的特性
                    data: {},//参数值
                    type: "POST",//请求的方式
                }).then(res => {
                    this.options = res.data;
                    console.log("res.data.storeName:", this.options)
                })
            }
        }
    })
</script>

</body>
</html>

css

* {
    /* margin: 0;
     padding: 0;*/
}

#chart-container {
    /*position: relative;
    height: 100vh;
    overflow: hidden;*/
    width: 500px;
    height: 500px;
}

#chart-container2 {
    /*position: relative;
    height: 100vh;
    overflow: hidden;*/
    width: 500px;
    height: 500px;
}

#chart-container3 {
    /*position: relative;
    height: 100vh;
    overflow: hidden;*/
    width: 500px;
    height: 500px;
}

#chart-container4 {
    /*position: relative;
    height: 100vh;
    overflow: hidden;*/
    width: 500px;
    height: 500px;
}

#chart-container5 {
    /*position: relative;
    height: 100vh;
    overflow: hidden;*/
    width: 500px;
    height: 500px;
}

#chart-container6 {
    /*position: relative;
    height: 100vh;
    overflow: hidden;*/
    width: 500px;
    height: 500px;
}

#chart-container7 {
    /*position: relative;
    height: 100vh;
    overflow: hidden;*/
    width: 500px;
    height: 500px;
}

#chart-container8 {
    /*position: relative;
    height: 100vh;
    overflow: hidden;*/
    width: 500px;
    height: 500px;
}

js

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});

var dom2 = document.getElementById('chart-container2');
var myChart2 = echarts.init(dom2, null, {
    renderer: 'canvas',
    useDirtyRect: false
});

var dom3 = document.getElementById('chart-container3');
var myChart3 = echarts.init(dom3, null, {
    renderer: 'canvas',
    useDirtyRect: false
});

var dom4 = document.getElementById('chart-container4');
var myChart4 = echarts.init(dom4, null, {
    renderer: 'canvas',
    useDirtyRect: false
});

var dom5 = document.getElementById('chart-container5');
var myChart5 = echarts.init(dom5, null, {
    renderer: 'canvas',
    useDirtyRect: false
});

var dom6 = document.getElementById('chart-container6');
var myChart6 = echarts.init(dom6, null, {
    renderer: 'canvas',
    useDirtyRect: false
});

var dom7 = document.getElementById('chart-container7');
var myChart7 = echarts.init(dom7, null, {
    renderer: 'canvas',
    useDirtyRect: false
});

var dom8 = document.getElementById('chart-container8');
var myChart8 = echarts.init(dom8, null, {
    renderer: 'canvas',
    useDirtyRect: false
});


const chartList = [myChart, myChart2, myChart3, myChart4, myChart5, myChart6, myChart7, myChart8]

var app = {};

var option;

var option1;

option1 = {
    title: {
        text: '单门店数据分析维度'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: []
};

option2 = {
    title: {
        text: '单门店数据分析维度'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: []
};

option3 = {
    title: {
        text: '单门店数据分析维度'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: []
};

option4 = {
    title: {
        text: '单门店数据分析维度'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: []
};


if (option1 && typeof option1 === 'object') {
    myChart.setOption(option1);
}

if (option2 && typeof option2 === 'object') {
    myChart2.setOption(option2);
}

if (option3 && typeof option3 === 'object') {
    myChart3.setOption(option3);
}

if (option4 && typeof option4 === 'object') {
    myChart4.setOption(option4);
}


function sendAjax(obj) {
    $.ajax({
        url: "http://localhost:9998/api/tiktokWeeklyStore/singleStore",//请求的url地址
        dataType: "json",//返回的格式为json
        contentType: "application/json",
        async: true,//请求是否异步，默认true异步，这是ajax的特性
        data: JSON.stringify(obj),//参数值
        type: "POST",//请求的方式
        success: function (data) {
            //console.log("this")
            //console.log(data.data)
            if (data) {
                option1.xAxis.data = data.data.xlist;
                // var series = [];
                // var names = [];
                let i = 0

                $("#main").empty();// 清空div内容
                for (var key in data.data.ymap) {
                    //console.log("key", key)
                    var series = [];
                    var names = [];
                    let title = [];

                    var datas = data.data.ymap[key];
                    var Item = {
                        name: key,
                        type: 'line',
                        data: datas
                    };
                    //names = [];//将要展示的名字集合清空
                    //series = [];
                    title.push(key);
                    series.push(Item);
                    names.push(key);

                    let newOption = option1
                    newOption.title.text = title
                    newOption.series = series
                    newOption.legend.data = names
                    //console.log("newOption", newOption)
                    chartList[i].hideLoading();
                    chartList[i].setOption(newOption);
                    chartList[i].hideLoading();
                    i++

                }

            }
        },
        error: function (e) {
            console.log(e)
        }
    })
}

sendAjax();



let store = {
    name: {},
    id: {}
};

$.ajax({
    url: "http://localhost:9998/api/tiktokWeeklyStore/listAllSore",//请求的url地址
    dataType: "json",//返回的格式为json
    async: true,//请求是否异步，默认true异步，这是ajax的特性
    data: {
        warehouse: $("#issued_sub_key_c").val(),
    },//参数值
    type: "POST",//请求的方式
    success: function (data) {
        console.log("this")
        console.log(data.data)
        if (data) {
            console.log("store.data",data.data)

            /*for(let i=0;data.data.length;i++) {
                $("#select_store").append("<li>"+data.data[i]+"</li>");
            }*/

            for (var i = 0; i < data.data.length; i++) {
                store = {
                    name: data.data[i].storeName,
                    id: data.data[i].tiktokId
                };
                console.info("store:"+store)
                $("#issued_sub_key_c").append("<option>" + data.data[i].storeName + "</option>");
            }

        }
    }
})


window.addEventListener('resize', myChart.resize);

柱状图

效果图

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>Stacked Line Chart - Apache ECharts Demo</title>
    <script src="../../js/jquery.min.js"></script>
    <link rel="stylesheet" href="./style.css">
    <script src="../../js/jquery.min.js"></script>
</head>
<body>
<div class="layui-col-xs6">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <!--    <div id="columnar" style="width: 800px;height:600px;"></div>-->

</div>

<div id="bar-container"></div>
<script src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
<script src="./bin.js"></script>


</body>
</html>

css

* {
    /* margin: 0;
     padding: 0;*/
}

#bar-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    /*width: 500px;
    height: 500px;*/
}

js

var dom = document.getElementById('bar-container');
var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});
var app = {};

var option;

const posList = [
    'left',
    'right',
    'top',
    'bottom',
    'inside',
    'insideTop',
    'insideLeft',
    'insideRight',
    'insideBottom',
    'insideTopLeft',
    'insideTopRight',
    'insideBottomLeft',
    'insideBottomRight'
];
app.configParameters = {
    rotate: {
        min: -90,
        max: 90
    },
    align: {
        options: {
            left: 'left',
            center: 'center',
            right: 'right'
        }
    },
    verticalAlign: {
        options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
        }
    },
    position: {
        options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
        }, {})
    },
    distance: {
        min: 0,
        max: 100
    }
};
app.config = {
    rotate: 90,
    align: 'left',
    verticalAlign: 'middle',
    position: 'insideBottom',
    distance: 15,
    onChange: function () {
        const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
        };
        myChart.setOption({
            series: [
                {
                    label: labelOption
                },
                {
                    label: labelOption
                },
                {
                    label: labelOption
                },
                {
                    label: labelOption
                }
            ]
        });
    }
};
const labelOption = {
    show: true,
    position: app.config.position,
    distance: app.config.distance,
    align: app.config.align,
    verticalAlign: app.config.verticalAlign,
    rotate: app.config.rotate,
    formatter: '{c}  {name|{a}}',
    fontSize: 16,
    rich: {
        name: {}
    }
};
option = {
    title: {
        text: '所有门店数据分析维度'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['Forest', 'Steppe', 'Desert', 'Wetland']
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    xAxis: [
        {
            type: 'category',
            axisTick: { show: false },
            data: ['2012', '2013', '2014', '2015', '2016']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Forest',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: [320, 332, 301, 334, 390]
        },
        {
            name: 'Steppe',
            type: 'bar',
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: [220, 182, 191, 234, 290]
        },
        {
            name: 'Desert',
            type: 'bar',
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: [150, 232, 201, 154, 190]
        },
        {
            name: 'Wetland',
            type: 'bar',
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: [98, 77, 101, 99, 40]
        }
    ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

$.ajax({
    url: "http://121.196.28.196:9998/api/tiktokWeeklyStore/allStoreDataAnalysis",//请求的url地址
    dataType: "json",//返回的格式为json
    async: true,//请求是否异步，默认true异步，这是ajax的特性
    data: {},//参数值
    type: "POST",//请求的方式
    success: function (data) {
        console.log("this")
        console.log(data.data)
        if (data) {
            var series = [];
            var names = [];
            let xAxis = [];

            for (let item  of data.data.xdata) {
                let xItem = {
                    axisTick: {show: false},
                    data: item
                }

            }
            let xItem = {
                type: 'category',
                axisTick: {show: false},
                data: data.data.xdata
            }
            xAxis.push(xItem);

            //$("#main").empty();// 清空div内容
            for (var key in data.data.ymap) {
                console.log("key", key)
                //var series = [];
                //var names = [];
                //let title = [];

                var datas = data.data.ymap[key];
                var Item = {
                    name: key,
                    type: 'bar',
                    data: datas
                };

                //names = [];//将要展示的名字集合清空
                //series = [];
                //title.push(key);
                series.push(Item);
                names.push(key);

            }
            option.xAxis=xAxis;
            console.log("xAxis",option.xAxis)
            option.series = series;
            option.legend.data = names;
            console.log("names",names)
            console.log(series)
            myChart.hideLoading();
            myChart.setOption(option);
            myChart.hideLoading();

        }
    },
    error: function (a, b, c) {
        console.log(errors)
    }
})

window.addEventListener('resize', myChart.resize);

注意点：

总结：

需要引入jquery的时候一定在最前面

{
console.log(“key”, key)
//var series = [];
//var names = [];
//let title = [];

            var datas = data.data.ymap[key];
            var Item = {
                name: key,
                type: 'bar',
                data: datas
            };

            //names = [];//将要展示的名字集合清空
            //series = [];
            //title.push(key);
            series.push(Item);
            names.push(key);

        }
        option.xAxis=xAxis;
        console.log("xAxis",option.xAxis)
        option.series = series;
        option.legend.data = names;
        console.log("names",names)
        console.log(series)
        myChart.hideLoading();
        myChart.setOption(option);
        myChart.hideLoading();

    }
},
error: function (a, b, c) {
    console.log(errors)
}

})

window.addEventListener(‘resize’, myChart.resize);




## 注意点：



**总结：**

- 需要引入jquery的时候一定在最前面

六月的六

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
echarts基本使用

echarts简单使用
复制链接

扫一扫

专栏目录

echarts基本使用

echarts

文章目录

折线图

柱状图

实例

折线图

柱状图

注意点：

“相关推荐”对你有帮助么？