头歌/数据可视化/Echarts可视化教程（五）——直角坐标系下的网格和坐标轴-CSDN博客

本文链接：https://blog.csdn.net/m0_74011360/article/details/148559290

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
	<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
 
    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
        grid: {
            show:true,
            /********* Begin *********/
            x:130,
            y:60,
            width:'70%',
            height:'40%',
            backgroundColor:'#eeffff'
 
            /********* End *********/
        },
        title : {
            text : "某商场各门店一周销售额",//标题
            left:'center'
        },
        tooltip : {
        },
        legend: {
            orient: 'vertical',
            x:10,
            y:10,
            data:['优衣库', '海底捞', '肯德基', '小米之家', '李宁']//图例
        },
        xAxis : [
          {
              show : true,
              name: '星期',
              /********* Begin *********/
                namelocation:'end',
 
              /********* End *********/
              type : 'category',//表示x轴的每一项由几组数据组成
              data : ['周一','周二','周三','周四','周五','周六','周日']//x轴标题
          }
        ],
        yAxis : [
          {
               show : true,
               name: '销量（万元）',
               /********* Begin *********/
                namelocation:'end',
 
               /********* End *********/
              type : 'value'//每一项都是数据
          }
        ],
        series : [
             {
                 name:'优衣库',//数据的名字
                 type:'line',//表示柱状图
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
                 data:[33, 35, 38, 36, 35, 45, 48]//数据
             },
              {
                 name:'海底捞',//数据的名字
                 type:'line',//表示柱状图
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
                 data:[67, 65, 69, 70, 81, 102, 105]//数据
             },
              {
                 name:'肯德基',//数据的名字
                 type:'line',//表示柱状图
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
                 data:[38, 36, 38, 40, 50, 60, 65]//数据
             },
              {
                 name:'小米之家',//数据的名字
                 type:'line',//表示柱状图
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
                 data:[57, 55, 56, 58, 65, 74, 75]//数据
             },
              {
                 name:'李宁',//数据的名字
                 type:'line',//表示柱状图
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
                 data:[28, 29, 31, 30, 37, 46, 44]//数据
             }
         ]
    });
 
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
 
    </script>
</body>
</html>