图表echarts折线图,柱状图,饼状图

总体就是有折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置。饼状图如何默认显示几个数据中的某个数据

折线图:legend(小标题)中间默认是圆圈

改变成直线

在legend设置的时候就改变icon的形状

legend: {
            data:[
            {
                name:‘访问次数‘,
                icon:‘line‘
            },
            {
                name:‘访‘,
                icon:‘line‘
            },
            {
                name:‘访问‘,
                icon:‘line‘
            },
            ],
            textStyle:{
                color:‘#fff‘
            },
            right:‘25‘,
        },

折线的折点是通过series中的symbol来改变形状,像none就会取消折点。这几种状态可以翻阅百度图表的官方配置手册。

        series:[
                {
                    name:‘访问次数‘,
                    type:‘line‘,
                    stack: ‘总量‘,symbol: ‘circle‘,
                    data:[150, 232, 201, 154, 190, 330, 410,420, 432, 401, 434, 490, 430, 420,]
                },
                {
                    name:‘访‘,
                    type:‘line‘,
                    stack: ‘总量‘,symbol: ‘circle‘,
                    data:[320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320,]
                },
                {
                    name:‘访问‘,
                    type:‘line‘,
                    stack: ‘总量‘,symbol: ‘circle‘,
                    data:[820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 990, 530, 820,]
                }
            ],

设计要求y轴没有刻度线和数量单位只有y小标题,且标题位置移动。x轴刻度单位倾斜角度,如图

yAxis: {        //小标题
            name:‘4月‘,
            nameLocation:‘start‘,       //位置和基本属性
            nameTextStyle:{
                color:‘#fff‘,
                fontSize:10,
                padding:[-30,40,0,0],
            },
            type: ‘value‘,      //y轴刻度单位
            axisLabel:{
                show:false,
            },       //y轴刻度线显示
            axisTick: {
                show: false,
            },       //y轴颜色
            axisLine:{
                lineStyle: {
                    color: ‘#1793e1‘
                },
            },
        },

x轴倾斜角度是在xAxis里写上rotate的角度大小

axisLabel:{

color:‘#fff‘,

rotate: -45,

fontSize:10,

},

柱状图的时候要求Y刻度线倾斜,数量单位间距拉大,加上单位,如图

 

yAxis: {
            min: 0,最小单位为0
            max: 2000,最大单位为2000
            minInterval:1000,间距1000
            type: ‘value‘,
            axisLabel: {刻度单位设置
                show: true,显示
                rotate: -90,角度
                formatter: function (value) {刻度显示内容使用方法
                    //y轴的数字加上单位,除了第一个0以外
                    if(value==0){
                        return value;
                    }else{
                        return value+"k";
                    }
                }
            },
},

series: [{填写内容,只截取了关键段

label: {

normal: {

show: true,

position: ‘top‘,位置

color: ‘#fff‘,

formatter:内容设置

function(param) {

return param.data +‘k‘;所有内容加上单位k

},

},

},

}],

饼状图要求中间默认其中某个数值的百分比,覆盖上去没有效果和显示就是false的事,关了就好,默认显示是效果如图;

  

        series: [在这里设置,重点有1,2
            {
                hoverAnimation: false,覆盖放大效果关闭
                name:‘访问来源‘,
                type:‘pie‘,饼状图
                radius: [‘50%‘, ‘70%‘],尺寸
                avoidLabelOverlap: false,
                label: { 主要是在这里关闭显示数据大小
                    normal: {
                        show: false,关闭,1
                        position: ‘center‘,居中
                        color:‘#9cd2ff‘,颜色
                        textStyle: {
                            fontSize: ‘25‘,
                        },
                    },
                    labelLine :{show:false},
                },
                labelLine: {
                    normal: {
                        show: false指线关闭
                    }
                },
                color:[‘#9cd2ff‘,‘#7935a7‘],
                data:[重点2在这里,选择你想要默认显示的数据,对其进行label的显示,和内容设置,想我选择了{d}和%,显示对换人数的所占百分比
                    {value:535, name:‘兑换人数‘,
                    label:{
                        show:true,
                        formatter: ‘{d}%‘,
                    }},
                    {value:110, name:‘剩余人数‘},
                ]
            }
        ]

  

  

原文地址:https://www.cnblogs.com/wsmpy3/p/10898901.html

时间: 2024-10-06 18:22:18

图表echarts折线图,柱状图,饼状图的相关文章

ECharts 报表事件联动系列四:柱状图,折线图,饼状图实现联动

代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ECharts</title> <!-- <script src="http://echarts.baidu.com/dist/echarts.min.j

C# 绘制图表(柱状图,线性图,饼状图)

http://blog.csdn.net/gisfarmer/article/details/3736452 Chart饼状图,每根柱子的宽度: int a = Chart1.Series["Series1"].Points.Count;  Chart1.Series["Series1"].CustomProperties = "PointWidth=0.5";  Chart1.Width = Unit.Pixel(25 * a); 如果有多个S

Excel数据可视化应用(直方图、折线图、饼状图)

直方图:对比关系 直方图是一种统计报告图,是表示资料变化情况的主要工具.直方图由一系列高度不等的的纵向条纹或线段表示数据分布的情况.一般用横轴表示数据类型,纵轴表示分布情况. 例1: 1.右键单击图表的纵坐标轴数据,选择“设置坐标轴格式”命令打开窗格,在“坐标轴选项”下,各类数据设置如下: 2.右键单击图例,选择设置图例格式,选择靠上(或点击图表空白处,点击上方图表工具中的设计,选择下方左侧的“添加图表元素”,选择“图例”.“顶部”) 3.右键单击任一直条(单击一下会自动选择全部直条),选择“添

Android之自定义控件实现天气温度折线图和饼状图

以前写了个天气的APP,最近把他更新了一个版本,就抽取其中的天气温度折现图这个功能写了这篇博客,来与大家分享,希望对你有所帮助. 效果如图: 代码: MainActivity.Java /**** * 饼状图和天气折线图 */ public class MainActivity extends AppCompatActivity { private WeatnerChartView chart1; private WeatnerChartView chart2; private PinChart

PSP 进度条 柱状图 饼状图

9号 类别 开始时间 结束时间 间隔 净时间 燃尽图 8::00 8:20 0 20分钟 站立会议 8:20 8:50 0 30分钟 读构建之法 9:20 13:20 2小时 2小时 四人小组项目 14:00 17:30 0 3个半小时 12号 结对项目 8:00 18:00 2小时 8小时 Coding net Git SSH 19:00 22:00 0 3小时 13号 个人项目 8:00 18:00 2小时 8小时 Coding net Git ssh 19:00 22:00 0小时 3小时

Android开源图表之树状图和饼状图的官方示例的整理

最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Eclipse版本的类库.(有需要要的留下邮箱) 这就是Code中的效果(树状图) 1 public class BarChartActivity extends Activity implements OnChartValueSelectedListener{ 2 3 private BarChart m

【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽

本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有趣的. 1.饼状图的绘制 与[入门 - 第 9.1 章]稍有有些不同,我们对饼状图的每一个区域都使用一个 g 标签将其包围起来,以便平移操作. var gAll = svg.append("g") .attr("transform","translate(&q

iOS:使用贝塞尔曲线绘制图表(折线图、柱状图、饼状图)

1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点.终止点(也称锚点)以及两个相互分离的中间点. 滑动两个中间点,贝塞尔曲线的形状会发生变化. UIBezierPath :对象是CGPathRef数据类型的封装,可以方便的让我们画出 矩形 . 椭圆 或者 直线和曲线的组合形状 初始化方法: + (instancetype)bezierPath; /

折线图 饼状图 柱状图

xaml 文件 <Window x:Class="Supplier.TrendCharts" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="产品价格趋势图" Height="500" Width