echarts的使用

Posted 2021-06-10 ```飞翔的翅膀```

Echarts优势

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

Echarts如何使用

    <style>
        #box {
            width:100%;
            height: 400px;
            border:1px solid #f00;
        }
    </style>
  <div id="box"></div>
  <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>

如何更换Echarts主题样式

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

更换Echarts渲染模式

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

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

多系列数据

通过添加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]
            }    
    ]
    }

Echarts组件：

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

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

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