echarts之通用配置

通用配置

  • 标题: title
  • 提示: tooltip
  • 工具按钮: toolbox
  • 图例: legend
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>柱状图</title>
  <!--  1。引入echart.js文件-->
  <script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="height: 600px;width: 600px">

</div>
<script>

    //3。初始化echarts实力对象
    var mCharts = echarts.init(document.querySelector('div'));
    var xArrData = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'];
    var yArrData1 = [88, 92, 63, 77, 94, 80, 72, 86];
    var yArrData2 = [88, 92, 63, 77, 94, 80, 72, 86];

    //4。准备配置项
    var option = {
        title: {
            text: '成绩展示',
            //标题文本
            textStyle: {
                color: 'red'
            },
            //标题边框
            borderWidth: 5,
            borderColor: 'blue',
            borderRadius: 5,
            //标题位置
            left: 50,
            top: 20
        },
        tooltip: {
            // trigger:'item'
            trigger: 'axis',
            triggerOn: 'click',
            // formatter:'{b}的成绩是{c}'
            formatter:function (arg){
                console.log(arg)
                // return "haha";
                return arg[0].name+'的分数是'+arg[0].data
            }
        },
        toolbox:{
            feature:{
                saveAsImage:{}, //下载图片
                dataView:{},// 数据视图
                restore:{},//重置
                dataZoom:{},//区域缩放
                magicType:{
                    type:['bar','line']
                }//不同的两种图标进行切换
            }
        },
        legend:{
            data:['语文','数学']
        },
        xAxis: { //直角坐标系中的x轴
            type: 'category', //类目轴
            data: xArrData
        },
        yAxis: {//直角坐标系中的y轴
            type: 'value', //数值轴
        },
        series: [ // 系列列表。每一个系列通过type决定自己的图标类型
            {
                name: '语文',
                type: 'bar', //图标的类型
                data: yArrData1
            },
            {
                name: '数学',
                type: 'bar', //图标的类型
                data: yArrData2
            },
        ]
    }

    //5。将配置项设置给echarts实例对象
    mCharts.setOption(option);
</script>
</body>
</html>
posted @ 2022-08-03 00:16  King-DA  阅读(148)  评论(0)    收藏  举报