1.15VUE学习日志

echarts绘制图表：

基本图表类型bar：柱状图               line:折线图               pie：饼图

<div id="card"></div> 
    //引入
    <script src="./echarts.min.js"></script>
    <script>
        var card = document.getElementById('card')
        var echar = echarts.init(card);
        let a = [['d','dsf','dsfew'],
                ['宿舍',23,13],
                ['饿饿',11,23],
                ['问问',32,15]];
        //基本配置项
        var option = {
            dataset:{
                source:a
            },
            xAxis:{ type:'category' },
            yAxis:{},
            series:[
                {type:'bar'},
                {type:'bar'}
            ]
        }
        //使用配置项和数据显示图表
        echar.setOption(option);
    </script>

在浏览器来回缩放尺寸时 使用risize函数 随浏览器的变化而变化

window.onresize= function(){
        mychart.resize();
}

颜色主题

1.ECharts5 除了一贯的默认主题外，还内置了'dark'主题。可以像这样切换成深色模式

2.其他的主题，没有内置在 ECharts中，需要自己加载。这些主题可以在 主题编辑器 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用下载主题并引入：

<scriptsrc="./js/walden.js"></script>

初始化并使用主题：varmychart= echarts.init(dom,'walden')

调色盘

全局调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。

var options= {
    color:['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'],
    yAxis:{},
    xAxis:{
        data:['生产','总装','涂装','焊装']}

高亮的样式：emphasis 在点击时改变颜色 观看效果更明显

var option = {
    series:[
        type:'bar',
        emphasis:{
              itemStyle:{
                       //点击时显示的颜色
                    color:'red'

}          }    ]       }

数据集（dataset）是专门用来管理数据的组件。虽然每个系列都可以在 series.data中设置数据，但是从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。

let a = [[数据头(表名)],
        [数据],
        [数据],
        [数据]] 
var option = {   
dataset:{
    source:a    //需在X轴设置类目轴
},
xAxis:{type:'category'}
}

展示背景颜色

showBackground:true,
backgroundStyle:{color:'red'}   //写在series中

展示标题

varoption= {...
title:{//自定义图表的标题      
    text:'标题名字',
    link:"http://www.baidu.com",
    left:"center"}