Echarts

语法

Echarts使用JSON格式进行配置

//配置标题
title:{
	text:''
}
//配置提示信息
tooltip:{
    
}
//图例组件
legend:{
    data:[{
        name:'',
        //图形
        icon:'cirle',
        //文本颜色
        textStyle:{
            color:'red'
        }
    }]
}
//X轴上显示的项
xAxis:{
    data:['','']
}
//Y轴上显示的项
yAxis:{
    
}
//系列列表
series:[{
    //系列名称
	name:'',
    //系列图标类型
    type:'bar'，
    //系列中的数据内容
    data:[a,s,d,f,g]
}]

常用type集合

• **type: ‘bar’**：柱状/条形图
• **type: ‘line’**：折线/面积图
• **type: ‘pie’**：饼图
• **type: ‘scatter’**：散点（气泡）图
• **type: ‘effectScatter’**：带有涟漪特效动画的散点（气泡）
• **type: ‘radar’**：雷达图
• **type: ‘tree’**：树型图
• **type: ‘treemap’**：树型图
• **type: ‘sunburst’**：旭日图
• **type: ‘boxplot’**：箱形图
• **type: ‘candlestick’**：K线图
• **type: ‘heatmap’**：热力图
• **type: ‘map’**：地图
• **type: ‘parallel’**：平行坐标系的系列
• **type: ‘lines’**：线图
• **type: ‘graph’**：关系图
• **type: ‘sankey’**：桑基图
• **type: ‘funnel’**：漏斗图
• **type: ‘gauge’**：仪表盘
• **type: ‘pictorialBar’**：象形柱图
• **type: ‘themeRiver’**：主题河流
• **type: ‘custom’**：自定义系列

样式

颜色主题

默认两个主题

• light：var chart = echarts.init(dom, 'light');
• dark: var chart = echarts.init(dom, 'dark');

调色盘

调色盘可以在 option 中设置。

调色盘给定了一组颜色，图形、系列会自动从其中选择颜色。

可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

option = {
    // 全局调色盘。
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

    series: [{
        type: 'bar',
        // 此系列自己的调色盘。
        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
        ...
    }, {
        type: 'pie',
        // 此系列自己的调色盘。
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        ...
    }]
}

高亮-emphasis

在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。

如果要自定义高亮样式可以通过 emphasis 属性来定制：

emphasis: {
    itemStyle: {
        // 高亮时点的颜色
        color: 'red'
    },
    label: {
        show: true,
        // 高亮时标签的文字
        formatter: '高亮时显示的标签内容'
    }
},

异步加载添加loading效果

只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画：

var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();  // 开启 loading 效果
$.get('https://www.runoob.com/static/js/echarts_test_data.json', function (data) {
    myChart.hideLoading();  // 隐藏 loading 效果
    myChart.setOption({
        series : [
            {
                name: '访问来源',
                type: 'pie',    // 设置图表类型为饼图
                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data:data.data_pie
            }
        ]
    })
}, 'json')

https://www.cnblogs.com/ringwang/p/9619472.html

Donate