echarts 的简单使用_vs2019 echarts-优快云博客

本文链接：https://blog.youkuaiyun.com/guo_2019/article/details/109748576
echarts官网：https://echarts.apache.org/zh/index.html
一个简单的demo，上面的备注是以前刚学echarts的时候官网上巴拉下来的，通过官网上的配置项手册，将官网上和你需求相近的实例改吧改吧就ok拉。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom(容器) -->
    <div id="main" style="width: 600px;height:400px;border:1px solid red;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {  //标题组件，包含主标题和副标题。
                text: 'ECharts-par-title',  //主标题文本，支持使用 \n 换行
                textStyle:{//图例文字的样式
                    color:'#333'
                }
            },
            grid: {  //直角坐标系内绘图网格
                left: '3%',  //grid 组件离容器左侧的距离。
                top: '60',  //grid 组件离容器上侧的距离。
                right: '4%',
                bottom: '3%',
                width : '530',  //grid 组件的宽度。默认自适应
                height: "300",   //grid 组件的高度。默认自适应
                containLabel: true,   //grid 区域是否包含坐标轴的刻度标签。
                show: true,  //是否显示直角坐标系网格。
                backgroundColor: 'rgb(128, 128, 128,.1)',  //此配置项生效的前提是，设置了 show: true。
                // tooltip: {  //本坐标系特定的 tooltip 设定。
                //     show: true,  
                //     trigger: 'item',   //触发类型。 axis item  none
                //     axisPointer: {   //坐标轴指示器配置项。
                //         type: 'shadow',  // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
                //         label: {
                //             show: true,
                //             color: "red"
                //             // formatter: 'some text {value} some text'
                //         }    
                //         // label:  
                //     }
                // }
            },
            tooltip: {   //提示框组件。
                trigger: 'item',  //坐标轴触发，主要在柱状图
                axisPointer: {     //坐标轴指示器配置项(鼠标移动上去咋显示)
                    type: 'shadow',   //'line' 直线指示器 'shadow' 阴影指示器 'cross' 十字准星指示器。 'none' 无指示器
                },
                triggerOn: 'mousemove',  //提示框触发的条件，可选 click  默认鼠标移入显示
                formatter: '{a} <br/>{b} : {c} '   //提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
                    // 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
                    // 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
                    // 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
                    // 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            },
            legend: {　//图例组件。
                type: 'plain',  //'plain'：普通图例  'scroll'：可滚动翻页的图例
                data:['销量'],    // 图例的数据数组
                textStyle: {  //图例项的文本样式
                    color: 'red'
                },
                backgroundColor: 'rgb(128, 128, 128,.2)'   //图例背景色，默认透明。
            },
            xAxis: {   //直角坐标系 grid(网格) 中的 x 轴
                name: 'X轴',  //坐标轴名称
                nameLocation: 'end',  //坐标轴名称显示位置  可选 start  'middle' 或者 'center'  end
                type: 'category', //坐标轴类型 'value' 数值轴，适用于连续数据  'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
                boundaryGap: ['20%', '20%'],  //坐标轴两边留白策略
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: { //直角坐标系 grid 中的 y 轴  
                show: true,   //是否显示 y 轴。
                position: "left",   // y轴的位置。'left'  'right'
                type: 'value',
                name: 'Y轴',  //坐标轴名称
                nameLocation: 'end',  //坐标轴名称显示位置  可选 start  'middle' 或者 'center'  end    
                nameTextStyle: {   // 坐标轴名称的文字样式。
                    color: "red",
                    fontSize: "10px",
                    verticalAlign: "bottom",    //文字垂直对齐方式，top。middle  bottom
                    backgroundColor: 'yellow'
                },
            },
            series: [{   //系列列表。每个系列通过 type 决定自己的图表类型
                name: '销量',  //系列名称  用于tooltip的显示，legend 的图例筛选
                type: 'bar',    //bar：柱状/条形图  pie:饼状图   折线图：line
                data: [30, 20, 36, 10, 10, 20],  //数据
                legendHoverLink: "true"
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    
</body>
</html>