echarts的一些使用

最新推荐文章于 2024-07-09 07:36:37 发布

斗气化码o(￣▽￣)ｄ

最新推荐文章于 2024-07-09 07:36:37 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/zsl10010/article/details/116692483

版权

canvas和svg区别？

1.canvas生成的是图片，位图（也称像素图），不能单独选中某个图形，只能选中整体

2.svg:放大不失真，能单独选中局部的某个图形，并且可以用css,js来操纵

1.Echarts优势

开源，免费，并且是百度开发，有详细中文文档

2.Echarts使用

2.1 快速使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width:100%;
            height: 400px;
            border:1px solid #f00;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script src="./lib/echarts.min.js"></script>
<script>
    //获取dom
    var box=document.getElementById('box')
    //初始化echarts图表对象
    var myEchart=echarts.init(box)

    //配置图表对象
    var options={
       
        xAxis:{
            data: ['全栈', '大数据', '人工智能']
        },
        yAxis:{},
        series:[
            {type:'bar',data:[15000,12000,13000]}
        ]
        
    }

    //指定给图表对象
    myEchart.setOption(options)
   
  

</script>
</html>

2.2 如何更换Echarts主题样式

第一步：打开主题编辑器,在线编辑你需要的主题 
	地址：https://echarts.apache.org/zh/theme-builder.html
第二步：编辑完点击下载主题js
第三步：在需要图表的页面中引入其js主题文件
第四步：在初始始化图表中第二个参数配置主题名
	 var myEchart=echarts.init(box,'dark')

2.3 更换Echarts渲染模式

默认Echarts用canvas渲染图表，但可以通过renderer来修改渲染模式

 echarts.init(dom,null,{renderer:'更改渲染模式canvas|svg'})
 
 例如： var myEchart=echarts.init(box,'dark',{renderer:'svg'})

2.4 多系列数据

通过添加series数组对象来增加
 //配置图表对象
    var options = {
        title: {
            text: '积云高薪就业排行',
            subtext: '全栈高薪就业'
        },
        tooltip: {
           // backgroundColor:'#f00'
        },
        legend: {
            data: ['平均薪资']
        },
        xAxis: {
            data: [{
                    value: '全栈',
                    textStyle: {
                        color: '#f00'
                    }
                }, {
                    value: '大数据',
                    textStyle: {
                        color: '#0f0'
                    }
                },
                '人工'
            ]
        },
        yAxis: {},
        series: [
            //柱形图
            {
            name: '平均薪资',
            type: 'bar',
            data: [15000, 12000, 13000]
        }, 
             //饼图
            {
            name: '薪资性别比',
            type: 'pie',
            radius: ['20%', '80%'],
            data: [{
                value: 260,
                name: '男',
            }, {
                value: 40,
                name: '女',

            }],
            width: 300,
            left: '80%',
            bottom: '60%'
        },
            //折线图
            {
              type:'line',
              data:[16000,14000,14500]
            }    
    ]

    }

2.5 Echarts组件：

title:标题组件
legend:图例组件
grid:绘图网格组件,可以改变带有坐标轴的绘图位置(left,top,bottom,right)，大小(width,height)
xAxis:x轴组件
yAxis:y轴组件
tooltip:提示框组件
toolbox:工具栏组件
dataZoom:区域缩放组件

2.6 dataset功能-【重点，也是难点】

ECharts 4 开始支持了 数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便

dataset数据源代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box" style="width: 100%; height: 500px"></div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
  <script>
    function getChart() {
      //创建Echarts对象
      var myEchart = echarts.init(document.getElementById("box"));
      var options = {
        title: {
          text: "Echarts入门",
        },
        tooltip:{},
        dataset:{
            source:[
            ['全栈',11000,14000,'初中',150],
            ['大数据',9000,3000,'高中',100],
            ['人工智能',10000,12060,'本科',20],
            ['测试',8000,11000,'中专',30],
        ]
        },
        xAxis:{type:'category'},
        yAxis:{},
        series:[
            {type:'bar',encode:{x:0,y:1}},
            {type:'line',encode:{x:0,y:2}},
            {bottom:'40%',left:'70%',radius:['10%','30%'],type:'pie',encode:{itemName:3,value:4}},

        ]
      };

      myEchart.setOption(options);
      myEchart.resize()
    }

    window.onload = function () {
        getChart()
      window.onresize = function () {
        getChart()
      };
    };
  </script>
</html>